/*! candc-rental-assets: 29 */

/**
 * フロント側のスタイル
 *
 * 1 行目の印は、このスタイルが想定している HTML の構造の版。
 * PHP 側の CANDC_RENTAL_ASSETS_VERSION と突き合わせ、食い違っていれば
 * 管理画面で知らせる。PHP だけ更新して assets を上げ忘れると、
 * 新しい構造に古いスタイルが当たって表示が崩れるため。
 *
 * 配色と書体はテーマのものを引き継ぐ。ここで決めるのは余白・情報の階層・
 * 入力部品の形だけにとどめ、どのテーマに入れても浮かないようにする。
 *
 * 線と面の色は currentColor を薄めて作る。明るいテーマでも暗いテーマでも
 * 文字色との関係が保たれる。
 */

/* ---------------------------------------------------------------------------
 * テーマの記事向け装飾を、プラグインの中では打ち消す
 *
 * 記事の本文を中央に寄せるため、段落へ大きな左右の余白を当てているテーマが
 * ある。実際に `.featured-post-layout p { padding: 0 140px }` を持つテーマが
 * あり、幅 362px の欄に 280px の余白が入って、文字が 4 文字ずつ折り返し、
 * ボタンが縦書きのようになっていた。
 *
 * 各テンプレートのルートには candc-rental と candc-rental-xxx の 2 つを
 * 付けてある。クラス 2 つ分の詳細度があれば、テーマの
 * 「クラス 1 つ + 要素」の指定に必ず勝てる。読み込み順に左右されない。
 * ------------------------------------------------------------------------- */

.candc-rental.candc-rental-product p,
.candc-rental.candc-rental-product-page p,
.candc-rental.candc-rental-cart p,
.candc-rental.candc-rental-catalog p,
.candc-rental.candc-rental-booking p,
.candc-rental.candc-rental-auth p,
.candc-rental.candc-rental-account p,
.candc-rental.candc-rental-archive p,
.candc-rental.candc-rental-archive-page p {
	padding-left: 0;
	padding-right: 0;
}

/* 注記の大きさも、テーマの本文サイズに上書きされないようにする。 */
.candc-rental .candc-rental-hint {
	font-size: 0.85em;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 共通の下地
 *
 * 色はテーマのものを使う。currentColor を薄めた値を線と背景に使うことで、
 * 明るいテーマにも暗いテーマにも馴染ませる。
 * ------------------------------------------------------------------------- */

.candc-rental-product,
.candc-rental-cart,
.candc-rental-catalog,
.candc-rental-booking,
.candc-rental-auth,
.candc-rental-account,
.candc-rental-archive,
.candc-rental-archive-page {
	--candc-line: color-mix(in srgb, currentColor 14%, transparent);
	--candc-line-strong: color-mix(in srgb, currentColor 28%, transparent);
	--candc-surface: color-mix(in srgb, currentColor 4%, transparent);
	--candc-muted: color-mix(in srgb, currentColor 65%, transparent);
	/* 外側の器はやわらかく、内側の部品は締める。 */
	--candc-radius: 10px;
	--candc-radius-inner: 6px;
	--candc-gap: clamp(1.5rem, 4vw, 2.5rem);
	--candc-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/*
 * 金額・日数・在庫は縦に並べて比べる数字なので、桁を揃える。
 * 等幅の数字が使える書体なら、テーマの書体のまま桁がそろう。
 */
.candc-rental-product,
.candc-rental-cart,
.candc-rental-catalog,
.candc-rental-calendar,
.candc-rental-archive {
	font-variant-numeric: tabular-nums;
}

/*
 * 見出しの大きさと書体はテーマに任せる。ただし寄せ方だけは指定する。
 * 記事向けに見出しを中央寄せにしているテーマがあり、そのままだと
 * 「レンタルの予約」や「スペック」が中央で折り返して読みにくくなる。
 */
.candc-rental-product,
.candc-rental-cart,
.candc-rental-catalog,
.candc-rental-auth,
.candc-rental-archive,
.candc-rental-archive-page {
	text-align: left;
}

.candc-rental-section {
	margin: 0;
	padding-top: var(--candc-gap);
	border-top: 1px solid var(--candc-line);
}

/*
 * 親のクラスを添えて詳細度を上げる。テーマの style.css はプラグインより
 * 後に読み込まれることがあり、h2 を中央寄せにしているテーマだと
 * そのままでは勝てない。
 */
.candc-rental-product .candc-rental-section__title,
.candc-rental-product .candc-rental-booking__title,
.candc-rental-cart .candc-rental-section__title,
.candc-rental-cart .candc-rental-cart__title,
.candc-rental-product-page > .candc-rental-product-page__title,
.candc-rental-archive-page > .candc-rental-archive-page__title {
	margin: 0 0 1rem;
	text-align: left;
	/* 大きさはテーマに寄せつつ、区切りとして読める下限を持たせる。 */
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.candc-rental-product .candc-rental-section,
.candc-rental-product .candc-rental-booking,
.candc-rental-cart {
	text-align: left;
}

.candc-rental-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85em;
	color: var(--candc-muted);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 入力欄とボタン
 *
 * 素のままだと、日付欄もボタンも小さすぎて押しづらい。
 * 形だけ整え、色はテーマの文字色から作る。
 * ------------------------------------------------------------------------- */

.candc-rental-product input[type="date"],
.candc-rental-product input[type="number"],
.candc-rental-product input[type="text"],
.candc-rental-product input[type="tel"],
.candc-rental-product select,
.candc-rental-product textarea,
.candc-rental-cart input[type="date"],
.candc-rental-cart input[type="number"],
.candc-rental-cart input[type="text"],
.candc-rental-cart input[type="tel"],
.candc-rental-cart select,
.candc-rental-cart textarea,
.candc-rental-auth input[type="email"],
.candc-rental-auth input[type="password"],
.candc-rental-auth input[type="text"] {
	/*
	 * 内側の余白を含めた幅にする。テーマが border-box を当てていないと、
	 * 幅 100% の入力欄が余白の分だけ親からはみ出し、2 列に並べたときに
	 * 隣とぶつかる。
	 */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
}

.candc-rental-product input:focus-visible,
.candc-rental-product select:focus-visible,
.candc-rental-cart input:focus-visible,
.candc-rental-cart select:focus-visible,
.candc-rental-cart textarea:focus-visible,
.candc-rental-auth input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.candc-rental-field {
	margin-bottom: 1.1rem;
}

/*
 * 入力欄ではなく決まった値を見せる行。カートのお届け先の都道府県は
 * ここで表示だけを出し、変更は条件の側で行わせる。
 */
.candc-rental-field__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95em;
}

.candc-rental-field__static {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	margin: 0;
	padding: 0.6em 0;
	line-height: 1.4;
}

.candc-rental-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95em;
}

.candc-rental-field-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0 1rem;
}

.candc-rental-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.7em 1.4em;
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.candc-rental-button {
	transition: background-color 0.2s var(--candc-ease), border-color 0.2s var(--candc-ease), transform 0.08s var(--candc-ease);
}

.candc-rental-button:hover,
.candc-rental-button:focus-visible {
	background: var(--candc-surface);
	color: inherit;
}

/* 押した感触。動かしすぎると安っぽくなるので 1px だけ沈める。 */
.candc-rental-button:active {
	transform: translateY(1px);
}

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

	.candc-rental-button:active {
		transform: none;
	}
}

/*
 * 主役のボタン。1 画面に 1 つだけ置く。
 *
 * Canvas / CanvasText はブラウザが持つ配色で、明るい配色でも暗い配色でも
 * 文字と背景の関係が保たれる。テーマの色を借りられれば理想だが、
 * 何色かを CSS 側から知る方法がないため、確実に読める組み合わせを使う。
 *
 * テンプレートには wp-element-button も付けてあるので、テーマが
 * このクラスへ独自の色を当てていればそちらが出る。
 */
/*
 * 押せないボタンは、押せないように見せる。テーマが独自の装飾を当てていると
 * disabled でも見た目が変わらず、押しても何も起きないボタンになる。
 */
.candc-rental-button:disabled,
.candc-rental-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.candc-rental-button:disabled:hover,
.candc-rental-button[disabled]:hover {
	background: inherit;
	transform: none;
}

.candc-rental-button--primary {
	padding: 0.85em 1.6em;
	border-color: transparent;
	background: CanvasText;
	color: Canvas;
	font-size: 1.05em;
}

.candc-rental-button--primary:hover,
.candc-rental-button--primary:focus-visible {
	opacity: 0.88;
}

.candc-rental-link {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * カートへの導線
 * ------------------------------------------------------------------------- */

.candc-rental-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-size: 0.95em;
	line-height: 1.3;
}

.candc-rental-cart-link:hover,
.candc-rental-cart-link:focus-visible {
	background: color-mix(in srgb, currentColor 6%, transparent);
	color: inherit;
}

/* 件数は数字だけで分かるので、丸で囲って目に留まるようにする。 */
.candc-rental-cart-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: CanvasText;
	color: Canvas;
	font-size: 0.8em;
	font-weight: 700;
}

.candc-rental-booking__cart {
	margin: 0 0 1.2rem;
}

/* ---------------------------------------------------------------------------
 * 一覧ページ（/rental/ とカテゴリー・メーカー）
 *
 * 器はテーマの種類で変わるが、中身は同じ。ここで決めるのは縦のリズムと、
 * 絞り込み・件数・ページ送りの形だけにとどめる。
 * ------------------------------------------------------------------------- */

/*
 * テンプレートパートを持たないブロックテーマで、ヘッダーの代わりに出す帯。
 * テーマの意匠は真似せず、ホームへ戻れることだけを引き受ける。
 * 変数は使わない。この要素はプラグインの器の外に出る。
 */
.candc-rental-fallback-header {
	box-sizing: border-box;
	padding: 1rem clamp(1rem, 4vw, 2rem);
	border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.candc-rental-fallback-header__home {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.candc-rental-fallback-header__home:hover,
.candc-rental-fallback-header__home:focus-visible {
	text-decoration: underline;
}

.candc-rental-archive-page {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
	/*
	 * 白い面はテーマの #main が持っていることがある。器を自前で出す以上、
	 * その面を借りられないので、ブラウザの既定の地色を敷く。
	 */
	background: Canvas;
}

.candc-rental-archive-page__description {
	max-width: 60ch;
	margin: 0 0 var(--candc-gap);
	color: var(--candc-muted);
	line-height: 1.8;
	text-wrap: pretty;
}

/*
 * 一覧の先頭に差し込む紹介文。
 *
 * 中身は店側がブロックで作るので、こちらは下の絞り込みとの間隔だけを
 * 決める。文字の大きさも色も指定しない（テーマとブロックの領分）。
 */
/* ---------------------------------------------------------------------------
 * 見積り依頼フォーム
 *
 * 団体・講習の相談を受け取る。予約フォームと同じ部品の見た目に揃える。
 * ------------------------------------------------------------------------- */

.candc-rental-quote {
	max-width: 34rem;
}

.candc-rental-quote__field {
	margin: 0 0 1.2rem;
}

.candc-rental-quote__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.candc-rental-quote__field input,
.candc-rental-quote__field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.7em;
	border: 1px solid var(--candc-border, #dcdee0);
	background: #fff;
	color: inherit;
	font: inherit;
}

.candc-rental-quote__field textarea {
	resize: vertical;
}

.candc-rental-quote__required {
	margin-left: 0.5em;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--candc-mist, #f4f5f6);
	font-size: 0.7em;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.candc-rental-quote__field .candc-rental-hint {
	display: block;
	margin-top: 0.3rem;
}

/*
 * 自動送信よけの欄。**画面から消すが、display:none にはしない。**
 * 自動送信の多くは display:none の欄を避けるため、避けられない形で隠す。
 */
.candc-rental-quote__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.candc-rental-quote__submit {
	margin: 1.6rem 0 0;
}

.candc-rental-archive__intro {
	margin-bottom: var(--candc-gap);
}

.candc-rental-archive__intro > *:first-child {
	margin-top: 0;
}

.candc-rental-archive__intro > *:last-child {
	margin-bottom: 0;
}

.candc-rental-archive__filter {
	margin: 0 0 1.2rem;
}

.candc-rental-archive__filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 丸いチップは、行の高さで背が決まらないようにする。
 *
 * inline-block + line-height だと、**日本語のグリフが行の高さを超えたときに
 * 文字が枠からはみ出して潰れて見える。** 使う書体はテーマ任せなので、
 * こちらでは決められない。中身を上下中央に置いて、最低限の高さを持たせる。
 */
.candc-rental-archive__filter-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.1rem;
	padding: 0.25em 0.95em;
	border: 1px solid var(--candc-line-strong);
	border-radius: 999px;
	color: inherit;
	font-size: 0.9em;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s var(--candc-ease), border-color 0.2s var(--candc-ease);
}

.candc-rental-archive__filter-link:hover,
.candc-rental-archive__filter-link:focus-visible {
	background: var(--candc-surface);
}

/*
 * 現在地は色ではなく塗りの反転で示す。テーマの基調色を借りられないため、
 * 明暗どちらのテーマでも読める組み合わせにする。
 */
.candc-rental-archive__filter-link.is-current {
	border-color: CanvasText;
	background: CanvasText;
	color: Canvas;
}

/* 子のカテゴリーは一段弱く見せて、親と並んでも混ざらないようにする。 */
.candc-rental-archive__filter-item--child .candc-rental-archive__filter-link {
	border-style: dashed;
}

.candc-rental-archive__count {
	margin: 0;
	color: var(--candc-muted);
	font-size: 0.85em;
}

.candc-rental-pagination {
	margin-top: var(--candc-gap);
	padding-top: 1.2rem;
	border-top: 1px solid var(--candc-line);
}

.candc-rental-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.candc-rental-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	padding: 0.45em 0.7em;
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius-inner);
	color: inherit;
	font-size: 0.9em;
	line-height: 1;
	text-decoration: none;
}

.candc-rental-pagination a.page-numbers:hover,
.candc-rental-pagination a.page-numbers:focus-visible {
	background: var(--candc-surface);
}

.candc-rental-pagination .page-numbers.current {
	border-color: CanvasText;
	background: CanvasText;
	color: Canvas;
}

/* 省略記号は枠を持たせない。押せないものが押せるように見える。 */
.candc-rental-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---------------------------------------------------------------------------
 * レンタル品の一覧
 * ------------------------------------------------------------------------- */

.candc-rental-catalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--candc-gap);
	margin: 2rem 0;
}

/*
 * カードは線で囲わず、画像と余白でまとまりを作る。
 * 枠・影・背景を全部足すと、どの道具も同じ強さで並んで見分けが付かない。
 */
.candc-rental-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border: 0;
	padding: 0;
}

.candc-rental-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.7rem;
	overflow: hidden;
	border-radius: var(--candc-radius);
	background: var(--candc-surface);
}

.candc-rental-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--candc-ease);
}

/* 触れると少しだけ寄る。写真を見に行く動きに合わせる。 */
.candc-rental-card:hover .candc-rental-card__image img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.candc-rental-card__image img,
	.candc-rental-card:hover .candc-rental-card__image img {
		transition: none;
		transform: none;
	}
}

.candc-rental-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-wrap: pretty;
}

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

.candc-rental-card__title a:hover,
.candc-rental-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 価格はカードで最初に読む数字なので、名前より強くする。 */
.candc-rental-card__price {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

.candc-rental-card__extra {
	margin: 0;
	font-size: 0.85rem;
	color: var(--candc-muted);
}

/* 説明は 2 行で止める。長さの違いでボタンの位置がばらつかない。 */
.candc-rental-card__excerpt {
	margin: 0.3rem 0 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--candc-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ボタンはカードの下端へ。並んだときに横一線に揃う。 */
.candc-rental-card > p:last-child {
	margin: auto 0 0;
	padding-top: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * 商品ページ
 * ------------------------------------------------------------------------- */

/*
 * クラシックテーマではテンプレートごと差し替えるため、テーマの本文欄が
 * 持っていた最大幅と余白がない。ここで用意しないと、内容が画面の左端に
 * 張り付いて右端で切れる。ブロックテーマではこの器を使わない。
 */
.candc-rental-product-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 120px clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;

	/*
	 * 器の背景を自分で持つ。
	 *
	 * テーマは本文の器（多くは #main）に白などを敷き、body には別の色を
	 * 置いていることがある。テンプレートを差し替えるとその器から外れるため、
	 * 背景を持たないと body の色がそのまま出る。実際、テーマの
	 * body: #eee / #main: #fff という組み合わせで灰色一色になっていた。
	 *
	 * テーマの器の色は知りようがないので、ブラウザが持つ既定の背景色を使う。
	 * 明るい配色では白、暗い配色では黒になり、文字色との関係が保たれる。
	 * テーマの id（#main など）を名乗って器を借りると、その id 向けの
	 * 余白や配置まで一緒に付いてきて、見出しの位置が崩れる。
	 */
	background: Canvas;
}

.candc-rental-product-page__title {
	margin: 0 0 1.5rem;
}

.candc-rental-product__terms {
	margin: 0 0 1rem;
}

/* 丸いチップは行の高さで背を決めない（絞り込みチップと同じ理由）。 */
.candc-rental-tag {
	display: inline-flex;
	align-items: center;
	min-height: 1.9rem;
	margin-right: 0.4rem;
	padding: 0.15em 0.75em;
	border: 1px solid var(--candc-line-strong);
	border-radius: 999px;
	font-size: 0.8rem;
	line-height: 1.4;
	text-decoration: none;
	color: inherit;
}

.candc-rental-product__main {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--candc-gap);
	align-items: start;
	margin-bottom: var(--candc-gap);
}

/* 画像が 1 枚もない商品では、左に空白を空けておく意味がない。 */
.candc-rental-product__main--no-media {
	grid-template-columns: minmax(0, 1fr);
	max-width: 32rem;
}

.candc-rental-product__main--no-media .candc-rental-product__media {
	display: none;
}

.candc-rental-product__details {
	display: grid;
	gap: var(--candc-gap);
}

/* ---------------------------------------------------------------------------
 * 予約フォーム
 * ------------------------------------------------------------------------- */

.candc-rental-booking {
	margin: 0;
	padding: 0;
	border: 0;
}

/* 商品ページの右カラムでは枠を付けて、操作する場所だとわかるようにする。 */
.candc-rental-product__booking .candc-rental-booking {
	position: sticky;
	top: 2rem;
	padding: clamp(1.1rem, 3vw, 1.6rem);
	border: 1px solid var(--candc-line);
	border-radius: var(--candc-radius);
}

.candc-rental-booking__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
}

/* 料金は商品ページで最初に見る数字なので、他より大きく出す。 */
/*
 * 料金の見出し。
 *
 * **この画面でいちばん強い数字は基本料金。** 延長料金と保証金枠を同じ
 * 強さで並べると、どれが今日払う金額なのかが読み取れない。ラベルは
 * 小さく、金額を大きく、延長は下に添える。
 */
.candc-rental-headline {
	margin: 0 0 1.2rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--candc-line);
}

.candc-rental-headline__label {
	display: block;
	color: var(--candc-muted);
	font-size: 0.85em;
}

.candc-rental-headline__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.15rem;
}

.candc-rental-headline__days {
	font-size: 1.1rem;
	font-weight: 600;
}

.candc-rental-headline__amount {
	font-size: clamp(1.6rem, 5vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
}

.candc-rental-headline__extra {
	display: block;
	margin-top: 0.3rem;
	color: var(--candc-muted);
	font-size: 0.9em;
}

.candc-rental-availability {
	margin: 1.2rem 0;
	padding: 0.8rem 1rem;
	border-radius: var(--candc-radius);
	background: var(--candc-surface);
	min-height: 1.5em;
	font-size: 0.95em;
}

.candc-rental-availability[data-state="available"] {
	background: rgba(0, 128, 0, 0.1);
}

.candc-rental-availability[data-state="unavailable"],
.candc-rental-availability[data-state="error"] {
	background: rgba(179, 45, 46, 0.1);
}

.candc-rental-form > p:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0;
}

.candc-rental-error {
	color: #b32d2e;
	font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
 * 画像ギャラリー
 * ------------------------------------------------------------------------- */

.candc-rental-gallery__main {
	margin: 0;
	border-radius: var(--candc-radius);
	overflow: hidden;
	background: var(--candc-surface);
}

.candc-rental-gallery__zoom {
	display: block;
	cursor: zoom-in;
}

.candc-rental-gallery__image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.candc-rental-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.candc-rental-gallery__thumb img {
	width: 100%;
	/*
	 * height を auto にしないと aspect-ratio が効かない。
	 *
	 * img の width / height 属性はブラウザが presentational hint として
	 * 扱うため、作者側で height を指定しないと属性の値（この場合 240px）が
	 * 残る。aspect-ratio は height が auto のときだけ幅から高さを決めるので、
	 * 幅 93px に対して高さ 240px という縦長になっていた。
	 */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border: 1px solid var(--candc-line);
	border-radius: 4px;
}

.candc-rental-gallery__thumb.is-current img {
	border-color: currentColor;
	border-width: 2px;
}

.candc-rental-lightbox {
	max-width: 96vw;
	max-height: 96vh;
	padding: 0;
	border: 0;
	border-radius: var(--candc-radius);
	background: transparent;
	overflow: visible;

	/*
	 * 中央に置くための余白を自分で指定する。
	 *
	 * dialog を画面の中央へ置いているのはブラウザ既定の margin: auto だが、
	 * テーマの冒頭に `* { margin: 0 }` のようなリセットがあると、
	 * 作者スタイルのほうが強いので打ち消され、左上に張り付く。
	 * 実際にそうなっていた。
	 */
	margin: auto;
}

.candc-rental-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.candc-rental-lightbox__stage img {
	max-width: 96vw;
	max-height: 84vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: var(--candc-radius);
}

.candc-rental-lightbox__counter {
	margin: 0.6rem 0 0;
	text-align: center;
	color: #fff;
	font-size: 0.9rem;
}

.candc-rental-lightbox__close,
.candc-rental-lightbox__prev,
.candc-rental-lightbox__next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.candc-rental-lightbox__close:hover,
.candc-rental-lightbox__prev:hover,
.candc-rental-lightbox__next:hover {
	background: rgba(0, 0, 0, 0.85);
}

.candc-rental-lightbox__close {
	top: 0.5rem;
	right: 0.5rem;
}

.candc-rental-lightbox__prev {
	top: 50%;
	left: 0.5rem;
	transform: translateY(-50%);
}

.candc-rental-lightbox__next {
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------
 * スペックと資料
 * ------------------------------------------------------------------------- */

.candc-rental-spec__list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 var(--candc-gap);
}

.candc-rental-spec__row {
	display: grid;
	grid-template-columns: minmax(6rem, 9rem) 1fr;
	gap: 0.5rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--candc-line);
}

.candc-rental-spec__row dt {
	font-size: 0.9em;
	color: var(--candc-muted);
	font-weight: 400;
}

.candc-rental-spec__row dd {
	margin: 0;
}

/*
 * 使い方動画。
 *
 * 配信元が返す iframe は width と height を属性で持っている。そのままだと
 * 幅の狭い画面ではみ出すので、幅いっぱいに広げて縦横比で高さを決める。
 * 16:9 は動画配信の標準。これ以外の比率で返ってきた場合の余白は、
 * 配信元が iframe の中で処理する。
 */
/*
 * 日数ごとの料金表と、日付を選んだときの金額。
 *
 * 料金表は JavaScript が動かなくても残る。金額の内訳は空き状況と同じ
 * 応答で埋まるので、動かない環境では出ない（そのぶんを料金表が補う）。
 */
.candc-rental-price-table {
	margin: 0 0 1.2rem;
	font-size: 0.95em;
}

/*
 * 畳んである間も「押せる」と分かる見た目にする。
 *
 * display を block 系にすると三角の印が消えるので list-item にする。
 * 印が無いと、ただの薄い文字にしか見えない。
 */
.candc-rental-price-table__summary {
	display: list-item;
	list-style-position: inside;
	padding: 0.35em 0;
	color: var(--candc-muted);
	font-size: 0.9em;
	cursor: pointer;
}

.candc-rental-price-table__summary:hover,
.candc-rental-price-table__summary:focus-visible {
	color: inherit;
}

.candc-rental-price-table__table {
	width: 100%;
	margin-top: 0.4rem;
	border-collapse: collapse;
}

.candc-rental-price-table__caption {
	margin-bottom: 0.4rem;
	color: var(--candc-muted);
	font-size: 0.85em;
	text-align: left;
}

.candc-rental-price-table__table th,
.candc-rental-price-table__table td {
	padding: 0.45em 0.6em;
	border-bottom: 1px solid var(--candc-line);
	text-align: left;
}

.candc-rental-price-table__table thead th {
	color: var(--candc-muted);
	font-size: 0.85em;
	font-weight: 400;
}

.candc-rental-price-table__table tbody th {
	font-weight: 400;
}

/*
 * 予約カード。枠で囲って「ここで申し込む」とわかる面を作る。
 * 色は足さない。テーマの配色を壊さないため、線と余白だけで区切る。
 */
.candc-rental-product .candc-rental-booking {
	padding: clamp(1.1rem, 3vw, 1.5rem);
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius);
	background: Canvas;
}

/* 開始日と終了日は並べて見る。狭い画面では縦に落とす。 */
.candc-rental-field-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0 1rem;
}

/* 数量の − と ＋。押せる大きさを確保する。 */
.candc-rental-stepper {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
}

.candc-rental-stepper input[type="number"] {
	width: 4.5rem;
	text-align: center;
}

.candc-rental-stepper__button {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius-inner);
	background: transparent;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.candc-rental-stepper__button:hover,
.candc-rental-stepper__button:focus-visible {
	background: var(--candc-surface);
}

.candc-rental-estimate {
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius-inner);
	background: var(--candc-surface);
}

.candc-rental-estimate__list {
	margin: 0;
}

.candc-rental-estimate__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
}

.candc-rental-estimate__row dt,
.candc-rental-estimate__row dd {
	margin: 0;
}

.candc-rental-estimate__row--total {
	margin-top: 0.45rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--candc-line-strong);
	align-items: baseline;
}

/* 視線の終点。レンタル料と送料より一段強くする。 */
.candc-rental-estimate__row--total dd {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.candc-rental-form__submit {
	margin: 1.1rem 0 0;
}

/*
 * 主役のボタンは幅いっぱい。指で押す前提の高さを持たせる。
 * ここだけは画面の広さで変えない。狭い画面ほど押しやすさが効く。
 */
.candc-rental-button--block {
	display: flex;
	width: 100%;
	min-height: 3rem;
	font-size: 1rem;
}

.candc-rental-form__note {
	margin-top: 0.6rem;
}

.candc-rental-estimate__row[hidden] {
	display: none;
}

.candc-rental-video__frame {
	margin: 0;
}

.candc-rental-video__frame iframe,
.candc-rental-video__frame video,
.candc-rental-video__frame embed,
.candc-rental-video__frame object {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--candc-radius-inner);
}

.candc-rental-video__fallback {
	margin: 0;
}

.candc-rental-documents__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.candc-rental-documents__item {
	margin: 0;
}

.candc-rental-documents__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--candc-line);
	border-radius: var(--candc-radius);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.candc-rental-documents__link:hover,
.candc-rental-documents__link:focus-visible {
	background: var(--candc-surface);
}

/* ダウンロードだと分かる目印。文字を足さずに示す。 */
.candc-rental-documents__link::before {
	content: "↓";
	font-weight: 400;
	opacity: 0.7;
}

.candc-rental-documents__meta {
	margin-left: auto;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--candc-muted);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 空き状況カレンダー
 * ------------------------------------------------------------------------- */

/* 月の名前は各月の見出しが持つので、ここは送りの操作だけ置く。 */
/*
 * カレンダーの操作段階。いま ① と ② のどちらにいるかを見せる。
 * JavaScript が動かない環境では、番号つきの案内として読める。
 */
.candc-rental-calendar__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.candc-rental-calendar__step {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.2em 0.8em;
	border: 1px solid var(--candc-line);
	border-radius: 999px;
	color: var(--candc-muted);
	font-size: 0.85em;
	line-height: 1.4;
}

.candc-rental-calendar__step.is-current {
	border-color: CanvasText;
	background: CanvasText;
	color: Canvas;
}

.candc-rental-calendar__step.is-done {
	border-color: var(--candc-line-strong);
	color: inherit;
}

.candc-rental-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.2rem;
}

.candc-rental-calendar__nav .candc-rental-button {
	padding: 0.45em 0.9em;
	font-size: 0.9rem;
}

.candc-rental-calendar__nav .candc-rental-button[disabled] {
	opacity: 0.4;
	cursor: default;
}

/*
 * 1 か月ぶんだけを出す。予約カードの中に置くので、2 か月を並べると
 * 入力欄が画面の外へ押し出される。前月・翌月は矢印で切り替える。
 */
.candc-rental-calendar__months {
	display: grid;
	gap: var(--candc-gap);
}

/*
 * 予約カードの中のカレンダー。カード自体が枠を持っているので、
 * ここでは上下の区切りだけにして、入れ子の面を作らない。
 */
.candc-rental-booking .candc-rental-calendar {
	margin: 0 0 1.2rem;
	padding: 0 0 1.2rem;
	border: 0;
	border-bottom: 1px solid var(--candc-line);
}

.candc-rental-booking .candc-rental-calendar .candc-rental-section__title {
	font-size: 1rem;
}

.candc-rental-calendar__month-title {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
}

.candc-rental-calendar__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
}

.candc-rental-calendar__table th {
	padding: 0.3rem 0;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--candc-muted);
}

.candc-rental-calendar__day {
	padding: 0;
	text-align: center;
	vertical-align: top;
}

.candc-rental-calendar__day > span,
.candc-rental-calendar__pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 100%;
	min-height: 3rem;
	padding: 0.3rem 0.15rem;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	font: inherit;
	color: inherit;
	line-height: 1.1;
}

.candc-rental-calendar__pick {
	cursor: pointer;
}

.candc-rental-calendar__date {
	font-size: 0.9rem;
	font-weight: 600;
}

.candc-rental-calendar__note {
	font-size: 0.65rem;
	color: var(--candc-muted);
	min-height: 1em;
}

.candc-rental-calendar__day.is-available .candc-rental-calendar__pick {
	background: rgba(0, 112, 23, 0.09);
	border-color: rgba(0, 112, 23, 0.2);
}

.candc-rental-calendar__day.is-few .candc-rental-calendar__pick {
	background: rgba(190, 120, 0, 0.12);
	border-color: rgba(190, 120, 0, 0.28);
}

.candc-rental-calendar__day.is-full > span {
	background: var(--candc-surface);
	color: var(--candc-muted);
}

.candc-rental-calendar__day.is-closed > span {
	opacity: 0.3;
}

.candc-rental-calendar__pick:hover,
.candc-rental-calendar__pick:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.candc-rental-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--candc-muted);
}

.candc-rental-calendar__legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.candc-rental-calendar__swatch {
	width: 1rem;
	height: 1rem;
	border-radius: 3px;
	display: inline-block;
}

.candc-rental-calendar__swatch.is-available {
	background: rgba(0, 112, 23, 0.18);
	border: 1px solid rgba(0, 112, 23, 0.3);
}

.candc-rental-calendar__swatch.is-few {
	background: rgba(190, 120, 0, 0.22);
	border: 1px solid rgba(190, 120, 0, 0.36);
}

.candc-rental-calendar__swatch.is-full {
	background: var(--candc-surface);
	border: 1px solid var(--candc-line);
}

/* ---------------------------------------------------------------------------
 * カート
 * ------------------------------------------------------------------------- */

.candc-rental-cart {
	margin: 2rem 0;
	padding: 0;
	border: 0;
}

.candc-rental-cart__title {
	margin: 0 0 1.5rem;
}

/*
 * 内容の確認と入力を左、金額と確定を右に置く。
 * 縦一列だと、住所を入れている間に合計が画面から消える。
 */
.candc-rental-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
	gap: var(--candc-gap);
	align-items: start;
}

.candc-rental-cart__aside {
	position: sticky;
	top: 2rem;
	display: grid;
	gap: 1.2rem;
	padding: clamp(1.1rem, 3vw, 1.5rem);
	border: 1px solid var(--candc-line);
	border-radius: var(--candc-radius);
}

.candc-rental-cart__aside > * {
	margin: 0;
}

.candc-rental-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2rem 0 1rem;
}

.candc-rental-table th,
.candc-rental-table td {
	border-bottom: 1px solid var(--candc-line);
	padding: 0.9rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.candc-rental-table th {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--candc-muted);
	letter-spacing: 0.04em;
	border-bottom-color: var(--candc-line-strong);
	white-space: nowrap;
}

/* 数量・空き・小計は幅を決めて折り返さない。読み比べる列なので右へ寄せる。 */
.candc-rental-table th:not(:first-child),
.candc-rental-table td:not(:first-child) {
	text-align: right;
	white-space: nowrap;
	width: 1%;
}

.candc-rental-table td:first-child {
	line-height: 1.6;
}

.candc-rental-table td:first-child a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.candc-rental-table td:first-child a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.candc-rental-table input[type="number"] {
	width: 4.5rem;
	text-align: right;
}

.candc-rental-row--shortage {
	background: rgba(179, 45, 46, 0.05);
}

.candc-rental-table__remove {
	width: 3rem;
}

/* 行を消す操作。目立たせすぎず、押せる大きさは確保する。 */
.candc-rental-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s var(--candc-ease), border-color 0.2s var(--candc-ease);
}

.candc-rental-remove:hover,
.candc-rental-remove:focus-visible {
	border-color: var(--candc-line-strong);
	opacity: 1;
}

/* 期間と数量の更新は副次の操作。主役の確定ボタンより弱く見せる。 */
.candc-rental-table ~ p .candc-rental-button,
.candc-rental-cart .candc-rental-form > p .candc-rental-button:not(.candc-rental-button--primary) {
	padding: 0.5em 1.1em;
	font-size: 0.9rem;
	font-weight: 400;
}

.candc-rental-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.candc-rental-summary dt {
	font-size: 0.85em;
	color: var(--candc-muted);
	font-weight: 400;
}

.candc-rental-summary dd {
	margin: 0;
	text-align: right;
}

/* 期間は文字数が多く、右寄せだと折り返しが不揃いになる。 */
.candc-rental-summary dd:first-of-type {
	font-size: 0.9em;
	line-height: 1.6;
	text-wrap: pretty;
}

/* 注記は文章なので左から読ませる。値の右寄せは受け継がない。 */
.candc-rental-summary dd .candc-rental-hint,
.candc-rental-cart__aside > .candc-rental-hint {
	display: block;
	text-align: left;
}

/* 左カラムは明細のすぐ下から始まる。見出しの上に間を取る。 */
.candc-rental-cart__main > .candc-rental-section__title {
	margin-top: 0.5rem;
}

.candc-rental-cart__layout {
	margin-top: 1.5rem;
}

/* 支払う金額は、この画面でいちばん大きい数字にする。 */
.candc-rental-summary__total {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.candc-rental-payment-methods {
	margin: 0;
	padding: 0;
	border: 0;
}

.candc-rental-payment-methods > legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-weight: 600;
	font-size: 0.9em;
}

.candc-rental-payment-option {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--candc-line-strong);
	border-radius: var(--candc-radius-inner);
	cursor: pointer;
	transition: background-color 0.2s var(--candc-ease), border-color 0.2s var(--candc-ease);
}

.candc-rental-payment-option:hover {
	background: var(--candc-surface);
}

.candc-rental-payment-option:has(input:checked) {
	border-color: currentColor;
	background: var(--candc-surface);
}

/* 選択肢が 1 つのときは選ばせない。押せる見た目にもしない。 */
.candc-rental-payment-option.is-only {
	cursor: default;
	border-style: dashed;
}

.candc-rental-payment-option.is-only:hover {
	background: transparent;
}

.candc-rental-cart__submit {
	margin: 0;
}

.candc-rental-cart__submit .candc-rental-button {
	width: 100%;
}

.candc-rental-transfer-details {
	margin: 0.5rem 0 1rem;
	padding: 1rem;
	background: var(--candc-surface);
	border-radius: var(--candc-radius-inner);
	white-space: pre-wrap;
	overflow-x: auto;
	font-size: 0.95em;
}

/* ---------------------------------------------------------------------------
 * お知らせ
 * ------------------------------------------------------------------------- */

.candc-rental-notice {
	margin: 1.2rem 0;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--candc-line-strong);
	border-radius: 0 var(--candc-radius) var(--candc-radius) 0;
	background: var(--candc-surface);
}

.candc-rental-notice p:first-child {
	margin-top: 0;
}

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

.candc-rental-notice--error {
	border-left-color: #b32d2e;
	background: rgba(179, 45, 46, 0.07);
}

.candc-rental-notice--success {
	border-left-color: #007017;
	background: rgba(0, 112, 23, 0.07);
}

.candc-rental-empty {
	margin: 2rem 0;
	color: var(--candc-muted);
}

/* ---------------------------------------------------------------------------
 * 画面が狭いとき
 * ------------------------------------------------------------------------- */

@media (max-width: 860px) {
	/* 画像の下に予約フォームを置く。追従も外す。 */
	.candc-rental-product__main {
		grid-template-columns: 1fr;
	}

	.candc-rental-product__booking .candc-rental-booking {
		position: static;
	}

	/* カートも縦に積む。金額は入力の後ろ、確定ボタンの直前に来る。 */
	.candc-rental-cart__layout {
		grid-template-columns: 1fr;
	}

	.candc-rental-cart__aside {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
 * ログイン・新規登録・パスワード再設定
 *
 * 1 枚のフォームだけの画面なので、幅を絞って中央に置く。本文と同じ幅まで
 * 広げると、入力欄が横に伸びきって、どこを見ればよいのか分からなくなる。
 * ------------------------------------------------------------------------- */

.candc-rental-auth {
	box-sizing: border-box;
	max-width: 26rem;
	margin: 0 auto;
	padding: var(--candc-gap) 0;
}

.candc-rental-auth__title {
	margin: 0 0 0.6rem;
}

.candc-rental-auth__lead {
	margin: 0 0 1.6rem;
	color: var(--candc-muted);
	font-size: 0.95em;
	line-height: 1.7;
	text-wrap: pretty;
}

.candc-rental-auth__form {
	margin: 0;
}

/* チェックボックスの行だけは、ラベルを横に置く。 */
.candc-rental-auth__remember label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.candc-rental-auth__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.8rem 1rem;
	margin-top: 1.6rem;
}

/*
 * 送信ボタンは、この画面でやることそのもの。迷わせないよう、
 * 狭い画面では幅いっぱいに広げる。
 */
.candc-rental-auth__actions .candc-rental-button--primary {
	flex: 1 1 12rem;
}

.candc-rental-auth__link {
	font-size: 0.9em;
	color: var(--candc-muted);
}

.candc-rental-auth__link:hover,
.candc-rental-auth__link:focus-visible {
	color: inherit;
}

.candc-rental-auth__switch {
	margin: 1.6rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid var(--candc-line);
	font-size: 0.95em;
}

/* ---------------------------------------------------------------------------
 * マイページの上部
 *
 * 会員には管理バーを出していないので、ログアウトはここにしかない。
 * 見出しと同じ行に置いて、探さずに見つかるようにする。
 * ------------------------------------------------------------------------- */

.candc-rental-account__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-bottom: var(--candc-gap);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--candc-line);
}

.candc-rental-account__title {
	margin: 0;
}

.candc-rental-account__session {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin: 0;
	font-size: 0.95em;
}

.candc-rental-account__name {
	color: var(--candc-muted);
}

@media (max-width: 600px) {
	/*
	 * 明細は表のままだと商品名の列が潰れ、1 文字ずつ折り返す。
	 * 行ごとに積み上げて、項目名を値の前に出す。
	 */
	.candc-rental-table thead {
		display: none;
	}

	.candc-rental-table,
	.candc-rental-table tbody,
	.candc-rental-table tr,
	.candc-rental-table td {
		display: block;
		width: auto;
	}

	.candc-rental-table tr {
		position: relative;
		padding: 1rem 0;
		border-bottom: 1px solid var(--candc-line);
	}

	.candc-rental-table td {
		border: 0;
		padding: 0.25rem 0;
		text-align: left;
		white-space: normal;
	}

	/* 右上の「×」と商品名が重ならないよう、名前側に逃げ場を作る。 */
	.candc-rental-table td:first-child {
		padding-right: 2.5rem;
	}

	.candc-rental-table input[type="number"] {
		width: 5rem;
	}

	.candc-rental-table td:not(:first-child)::before {
		content: attr(data-label) "：";
		color: var(--candc-muted);
		font-size: 0.85em;
		margin-right: 0.4em;
	}

	/* 取り除くボタンは行の右上へ。項目名は要らない。 */
	.candc-rental-table__remove {
		position: absolute;
		top: 0.8rem;
		right: 0;
		padding: 0;
	}

	.candc-rental-table__remove::before {
		content: none;
	}

	/*
	 * 狭い画面では「残り N 点」が読める大きさに入らない。
	 * 数字を潰して並べるより、色と日付だけにして高さを稼ぐ。
	 * 点数は読み上げ用のラベルに残してある。
	 */
	.candc-rental-calendar__note {
		display: none;
	}

	.candc-rental-calendar__day > span,
	.candc-rental-calendar__pick {
		min-height: 2.4rem;
	}

	.candc-rental-summary {
		grid-template-columns: 1fr;
		gap: 0.2rem;
		padding: 1rem;
	}

	.candc-rental-summary dd {
		margin-bottom: 0.8rem;
	}

	.candc-rental-spec__row {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}

	.candc-rental-form__submit .candc-rental-button--primary {
		width: 100%;
	}
}