/* ============================================================
 * 画屋「制作者プロモーションページ」スタイル
 *
 * 方針：kakuya.com（JIN／jin-child）の実際の記事デザインに準拠する。
 *   ・本文フォントはサイト共通のものを継承（Webフォントは読み込まない）
 *   ・色は実サイトから採取した値をそのまま使用
 *       本文 #7a6e71 ／ アクセント #dd305e（hover #ff6768）／ 罫線 #eee
 *   ・見出しは JIN の h2-style07（下4px罫＋アクセント）と
 *     h3-style04（左5px＋下dashed）の見え方に合わせている
 *   ・ページ全体の背景・フォントは上書きしない（採用LPの原稿用紙デザインとは別物）
 *
 * 貼り付け先：WordPress管理画面「外観 → カスタマイズ → 追加CSS」
 *            または子テーマの style.css の末尾
 * 見た目プレビュー：design-preview/制作者プロフィール_プレビュー_小川満洋.html
 * ============================================================ */

.kky-creator {
	--kky-text: #7a6e71;
	--kky-ink: #3c3335;
	--kky-sub: #a99fa1;
	--kky-accent: #dd305e;
	--kky-accent-hover: #ff6768;
	--kky-accent-bg: rgba(221, 48, 94, 0.06);
	--kky-line: #ececec;
	--kky-soft: #faf8f8;

	/* JINの本文カラム（約750px）の中では効かず、1カラム表示になった場合だけ効く保険 */
	max-width: 760px;
	margin: 0 auto;
	color: var(--kky-text);
	line-height: 1.8;
	letter-spacing: 0.05em;
}

.kky-creator img {
	max-width: 100%;
	height: auto;
}

/* ---------- 本文の基本 ---------- */
.kky-body p {
	margin: 0 0 1.6em;
	font-size: 1.05rem;
	font-weight: 300;
}

.kky-body p:last-child {
	margin-bottom: 0;
}

/* ============================================================
 * ヒーロー（顔写真・名前・役割・ひとこと）
 * ============================================================ */
.kky-hero {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 8px 0 28px;
	border-bottom: 1px solid var(--kky-line);
}

.kky-hero__photo {
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--kky-soft);
	box-shadow: 0 0 0 1px var(--kky-line);
}

.kky-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.kky-hero__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* バッジは2種類。工程（役割）と取引条件（直接依頼の可否）は別の軸なので、
 * 塗り／枠線で見た目を分け、同じ種類の情報だと誤解されないようにする。 */
.kky-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

/* 役割バッジ：JINのカテゴリーラベル（丸みのあるピル）に合わせている */
.kky-role {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	border-radius: 15px;
	background: var(--kky-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

/* 直接依頼バッジ：役割バッジと区別するため塗りではなく枠線にする
 * （クラス名 kky-solo は初期設計の名残。意味は「直接依頼を受け付ける」） */
.kky-solo {
	display: inline-block;
	padding: 3px 11px;
	border: 1px solid var(--kky-accent);
	border-radius: 15px;
	background: #fff;
	color: var(--kky-accent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

.kky-name {
	margin: 0 0 12px;
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 300;
	color: var(--kky-ink);
	letter-spacing: 0.08em;
}

.kky-lead {
	margin: 0;
	font-size: 1rem;
	font-weight: 300;
}

/* ---------- 得意分野タグ ---------- */
.kky-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 14px 0 0;
}

.kky-tags li {
	margin: 0;
}

.kky-tags a {
	display: inline-block;
	padding: 2px 12px;
	border: 1px solid rgba(221, 48, 94, 0.35);
	border-radius: 15px;
	background: var(--kky-accent-bg);
	color: var(--kky-accent);
	font-size: 0.78rem;
	line-height: 1.7;
	text-decoration: none;
}

.kky-tags a:hover {
	background: var(--kky-accent);
	border-color: var(--kky-accent);
	color: #fff;
}

/* ============================================================
 * 早見（価格帯・本人リンク）
 * 本文を読み込む前に判断材料を出す。10人並んだときの比較用。
 * ============================================================ */
.kky-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	padding: 18px 0 22px;
	border-bottom: 1px solid var(--kky-line);
	margin-bottom: 8px;
}

.kky-facts__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.kky-facts__label {
	flex: 0 0 auto;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--kky-sub);
}

.kky-facts__value {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-width: 0;
}

.kky-facts__note {
	font-size: 0.85rem;
	font-weight: 300;
}

/* 価格帯：3段階のうち該当する分だけ濃く表示する */
.kky-price {
	font-size: 1.25rem;
	letter-spacing: 0.06em;
	line-height: 1;
}

.kky-price .is-on {
	color: var(--kky-accent);
	font-weight: 700;
}

.kky-price .is-off {
	color: #dcd6d7;
	font-weight: 700;
}

/* ============================================================
 * セクション見出し（JIN h2-style07 に準拠）
 * ============================================================ */
.kky-sec {
	margin: 44px 0 0;
}

.kky-sec__title {
	position: relative;
	margin: 0 0 24px;
	padding: 15px 15px 10px 8px;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: 700;
	color: var(--kky-ink);
	letter-spacing: 0.04em;
}

.kky-sec__title::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	border-radius: 1px;
	background: #ccc;
	opacity: 0.5;
}

.kky-sec__title::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 120px;
	height: 4px;
	border-radius: 1px;
	background: var(--kky-accent);
}

/* ============================================================
 * 作品事例（本文のギャラリーブロックをそのまま活かす）
 * ============================================================ */
.kky-works__gallery {
	margin-top: 20px;
}

.kky-works__gallery img {
	border-radius: 4px;
	display: block;
}

/* キャプションのクラスはエディタによって違う。画屋は旧エディタ（クラシック）なので
 * .wp-caption-text が実際に使われる。他は将来ブロックに移行した場合の備え。 */
.kky-works__gallery figcaption,
.kky-works__gallery .wp-caption-text,
.kky-works__gallery .wp-element-caption {
	margin-top: 8px;
	font-size: 0.82rem;
	color: var(--kky-sub);
	text-align: left;
	line-height: 1.7;
}

/* ============================================================
 * 人物像インタビュー（JIN h3-style04 に準拠）
 * 回答が長文になる前提なので、質問だけを見出しにして本文は素の組みにする
 * ============================================================ */
.kky-qa {
	margin-bottom: 36px;
}

.kky-qa:last-child {
	margin-bottom: 0;
}

.kky-qa__q {
	position: relative;
	margin: 0 0 18px;
	padding: 6px 12px 6px 44px;
	border-left: 5px solid var(--kky-accent);
	border-bottom: 1px dashed var(--kky-accent);
	font-size: 1.15rem;
	line-height: 1.7;
	font-weight: 700;
	color: var(--kky-ink);
}

.kky-qa__q::before {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	content: "Q";
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--kky-accent);
	opacity: 0.5;
	line-height: 1;
}

/* ============================================================
 * 他己紹介（第三者の声であることが見て分かるカード）
 * ============================================================ */
.kky-others__card {
	position: relative;
	margin: 0;
	padding: 28px 30px 24px;
	background: var(--kky-soft);
	border: 1px solid var(--kky-line);
	border-left: 4px solid var(--kky-accent);
	border-radius: 4px;
}

/* 他己紹介が2本ある場合の間隔 */
.kky-others__card + .kky-others__card {
	margin-top: 20px;
}

.kky-others__card .kky-body p {
	font-size: 1rem;
}

.kky-others__author {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed #e2dcdd;
	font-size: 0.82rem;
	color: var(--kky-sub);
	text-align: right;
	letter-spacing: 0.08em;
}

.kky-others__author::before {
	content: "紹介：";
}

/* ============================================================
 * CTA（メイン＝画屋への相談。本人への直接連絡は控えめに併記）
 * ============================================================ */
.kky-cta {
	margin: 56px 0 8px;
	padding: 36px 32px 32px;
	background: var(--kky-soft);
	border: 1px solid var(--kky-line);
	border-radius: 6px;
	text-align: center;
}

.kky-cta__lead {
	margin: 0 0 12px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--kky-ink);
	letter-spacing: 0.06em;
}

.kky-cta__body {
	margin: 0 auto 26px;
	max-width: 34em;
	font-size: 0.92rem;
	font-weight: 300;
	text-align: left;
}

/* ---------- 2つの入口（直接依頼を受ける人だけ） ----------
 * 塗り（画屋）と枠線（直接）で優先度差を付ける。
 * 枠線ボタンはテキストリンクよりずっと目立つが、塗りボタンより一段下という関係。
 */
.kky-cta__doors {
	display: flex;
	gap: 16px;
	margin: 22px 0 0;
	text-align: left;
}

.kky-door {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 20px 18px 18px;
	background: #fff;
	border: 1px solid var(--kky-line);
	border-radius: 6px;
}

.kky-door--primary {
	border-color: rgba(221, 48, 94, 0.4);
}

.kky-door__title {
	margin: 0 0 6px;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--kky-ink);
	letter-spacing: 0.04em;
}

.kky-door__note {
	margin: 0 0 16px;
	font-size: 0.8rem;
	font-weight: 300;
	line-height: 1.7;
}

/* ボタンをカードの下端にそろえる（説明文の長さが違っても高さが合う） */
.kky-door__action {
	margin: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kky-door--primary .kky-door__action {
	display: block;
}

.kky-door--primary .kky-cta__btn {
	display: block;
	min-width: 0;
	width: 100%;
	padding: 14px 16px;
	font-size: 0.98rem;
	/* .kky-cta__doors の text-align:left を継承してしまうので明示的に中央へ戻す */
	text-align: center;
}

/* 直接連絡先は枠線ボタン。数が可変なので横に並べて折り返す */
.kky-door__link {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--kky-accent);
	border-radius: 30px;
	background: #fff;
	color: var(--kky-accent) !important;
	border-bottom: 1px solid var(--kky-accent) !important;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.kky-door__link:hover {
	background: var(--kky-accent);
	color: #fff !important;
}

.kky-cta__btnwrap {

	margin: 0;
}

.kky-cta__btn {
	display: inline-block;
	min-width: 260px;
	padding: 16px 40px;
	border-radius: 30px;
	background: var(--kky-accent);
	color: #fff !important;
	border-bottom: none !important;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	box-shadow: 0 3px 0 #b62449;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.kky-cta__btn:hover {
	background: var(--kky-accent-hover);
	box-shadow: 0 1px 0 #b62449;
	transform: translateY(2px);
	color: #fff !important;
}

.kky-cta__direct {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px dashed #e2dcdd;
	font-size: 0.82rem;
	color: var(--kky-sub);
}

/* サブ導線（本人のSNS等）はテキストリンクとして控えめに */
.kky-sns {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 0;
	margin: 0;
}

.kky-sns li {
	margin: 0;
}

.kky-sns a {
	font-size: 0.85rem;
	color: var(--kky-text);
	border-bottom: 1px solid var(--kky-line);
	text-decoration: none;
}

.kky-sns a:hover {
	color: var(--kky-accent);
	border-bottom-color: var(--kky-accent);
}

.kky-sns--cta {
	justify-content: center;
	margin-top: 10px;
}

/* ============================================================
 * スマートフォン
 * ============================================================ */
@media (max-width: 767px) {
	.kky-hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 18px;
		padding-bottom: 24px;
	}

	.kky-hero__photo {
		width: 108px;
		height: 108px;
	}

	.kky-tags {
		justify-content: center;
	}

	.kky-facts {
		flex-direction: column;
		gap: 12px;
	}

	.kky-facts__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.kky-name {
		font-size: 1.5rem;
	}

	.kky-sec {
		margin-top: 36px;
	}

	.kky-sec__title {
		font-size: 1.25rem;
		padding: 13px 6px 8px;
		margin-bottom: 20px;
	}

	.kky-sec__title::after {
		width: 80px;
	}

	.kky-qa__q {
		font-size: 1.05rem;
		padding: 6px 10px 6px 38px;
	}

	.kky-qa__q::before {
		left: 12px;
	}

	.kky-others__card {
		padding: 22px 20px 20px;
	}

	.kky-cta {
		padding: 28px 20px 26px;
		margin-top: 44px;
	}

	/* 2つの入口はスマホでは縦積み。横並びだと1枚170px程度で説明文が読めない */
	.kky-cta__doors {
		flex-direction: column;
		gap: 12px;
	}

	.kky-door__link {
		flex: 1 1 auto;
		text-align: center;
	}

	.kky-cta__btn {
		min-width: 0;
		width: 100%;
		padding: 16px 20px;
	}
}

/* ============================================================
 * 一覧ページ（制作者紹介・カテゴリーアーカイブ）
 * category-staff.php 用。個別ページと同じトークンを使う。
 * ============================================================ */
.kky-list {
	--kky-text: #7a6e71;
	--kky-ink: #3c3335;
	--kky-sub: #a99fa1;
	--kky-accent: #dd305e;
	--kky-accent-hover: #ff6768;
	--kky-accent-bg: rgba(221, 48, 94, 0.06);
	--kky-line: #ececec;
	--kky-soft: #faf8f8;

	max-width: 760px;
	margin: 0 auto;
	color: var(--kky-text);
	line-height: 1.8;
	letter-spacing: 0.05em;
}

.kky-list__header {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--kky-line);
}

.kky-list__title {
	margin: 0 0 8px;
	font-size: 1.8rem;
	font-weight: 300;
	color: var(--kky-ink);
	letter-spacing: 0.08em;
}

.kky-list__desc p {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
}

/* ---------- 絞り込み ---------- */
.kky-filter {
	padding: 20px 0 4px;
	border-bottom: 1px solid var(--kky-line);
}

.kky-filter__title {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--kky-ink);
	letter-spacing: 0.06em;
}

/* 何が起きるボタンなのかを明示する。個別ページの「タグ」と見た目が近いため、
 * 説明が無いと押せるものだと気づかれない。 */
.kky-filter__help {
	margin: 0 0 14px;
	font-size: 0.8rem;
	font-weight: 300;
	color: var(--kky-sub);
}

.kky-filter__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}

.kky-filter__label {
	flex: 0 0 6.5em;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--kky-sub);
}

.kky-filter__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

/* 押せるものだと見て分かるよう、飾りのタグ（.kky-card__tags）とは別の見た目にする。
 * タグは枠だけの淡いピル、こちらは塗りと影のあるボタン。 */
.kky-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border: 1px solid #ded7d9;
	border-radius: 18px;
	background: #fff;
	color: var(--kky-ink);
	font-size: 0.82rem;
	line-height: 1.7;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kky-chip:hover {
	border-color: var(--kky-accent);
	background: var(--kky-accent-bg);
	color: var(--kky-accent);
}

.kky-chip.is-active {
	background: var(--kky-accent);
	border-color: var(--kky-accent);
	color: #fff;
	box-shadow: none;
}

/* 件数はバッジにして、ラベルの文字と混ざらないようにする */
.kky-chip__n {
	padding: 0 7px;
	border-radius: 10px;
	background: var(--kky-soft);
	color: var(--kky-sub);
	font-size: 0.7rem;
	line-height: 1.8;
}

.kky-chip.is-active .kky-chip__n {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.kky-filter__status {
	margin: 4px 0 16px;
	font-size: 0.82rem;
	color: var(--kky-sub);
}

.kky-filter__reset {
	margin-left: 12px;
	padding: 2px 10px;
	border: 1px solid var(--kky-line);
	border-radius: 15px;
	background: #fff;
	color: var(--kky-sub);
	font-size: 0.75rem;
	font-family: inherit;
	cursor: pointer;
}

.kky-filter__reset:hover {
	color: var(--kky-accent);
	border-color: var(--kky-accent);
}

/* ---------- カード ----------
 * PCでもスマホでも同じ縦型カードを2列で並べる。
 * 以前は画像が左・文字が右の横長で、スマホだけ縦積みになり別物の見た目だった。
 */
.kky-cards {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.kky-card {
	margin: 0;
	border: 1px solid var(--kky-line);
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.kky-card:hover {
	border-color: rgba(221, 48, 94, 0.35);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.kky-card__link {
	display: block;
	text-decoration: none;
	border-bottom: none !important;
	color: inherit;
}

/* アイキャッチはカード幅いっぱいの正方形。既存のスタッフ画像が400×400のため */
.kky-card__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--kky-soft);
	border-bottom: 1px solid var(--kky-line);
}

.kky-card__thumb img,
.kky-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.kky-card__body {
	padding: 14px 16px 16px;
}

.kky-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 6px;
}

.kky-card__role {
	display: inline-block;
	margin-bottom: 0;
	padding: 3px 10px;
	border-radius: 15px;
	background: var(--kky-accent);
	color: #fff;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

.kky-card__solo {
	display: inline-block;
	padding: 2px 9px;
	border: 1px solid var(--kky-accent);
	border-radius: 15px;
	background: #fff;
	color: var(--kky-accent);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.kky-card__name {
	margin: 0 0 6px;
	font-size: 1.15rem;
	font-weight: 300;
	color: var(--kky-ink);
	letter-spacing: 0.06em;
}

/* リード文は2行で打ち切る。カードの高さを揃えて並びを崩さないため */
.kky-card__lead {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 300;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kky-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0;
	margin: 10px 0 0;
}

.kky-card__tags li {
	margin: 0;
	padding: 1px 10px;
	border: 1px solid rgba(221, 48, 94, 0.3);
	border-radius: 15px;
	background: var(--kky-accent-bg);
	color: var(--kky-accent);
	font-size: 0.72rem;
	line-height: 1.7;
}

.kky-empty {
	margin: 24px 0;
	padding: 20px;
	background: var(--kky-soft);
	border: 1px solid var(--kky-line);
	border-radius: 6px;
	font-size: 0.9rem;
}

/* ---------- コンシェルジュCTA ---------- */
.kky-concierge {
	margin: 40px 0 8px;
	padding: 32px 30px 28px;
	background: var(--kky-soft);
	border: 1px solid var(--kky-line);
	border-radius: 6px;
	text-align: center;
}

.kky-concierge__lead {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--kky-ink);
	letter-spacing: 0.06em;
}

.kky-concierge__body {
	margin: 0 auto 22px;
	max-width: 32em;
	font-size: 0.9rem;
	font-weight: 300;
	text-align: left;
}

.kky-concierge__btnwrap {
	margin: 0;
}

.kky-concierge__btn {
	display: inline-block;
	min-width: 240px;
	padding: 15px 36px;
	border-radius: 30px;
	background: var(--kky-accent);
	color: #fff !important;
	border-bottom: none !important;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	box-shadow: 0 3px 0 #b62449;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.kky-concierge__btn:hover {
	background: var(--kky-accent-hover);
	box-shadow: 0 1px 0 #b62449;
	transform: translateY(2px);
	color: #fff !important;
}

@media (max-width: 767px) {
	.kky-list__title {
		font-size: 1.5rem;
	}

	.kky-filter__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.kky-filter__label {
		flex: none;
	}

	/* スマホは2列。カードの形（縦型・正方形画像）はPCと同じなので、
	 * 列数だけを幅に合わせて落とす。3列だと1枚110px程度になり文字が読めない。 */
	.kky-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.kky-card__body {
		padding: 12px 12px 14px;
	}

	.kky-card__name {
		font-size: 1rem;
	}

	.kky-card__lead {
		font-size: 0.8rem;
	}

	.kky-card__role {
		font-size: 0.62rem;
		padding: 2px 8px;
	}

	.kky-concierge {
		padding: 24px 18px 22px;
	}

	.kky-concierge__btn {
		min-width: 0;
		width: 100%;
		padding: 15px 20px;
	}
}

/* JSで hidden を立てて出し分けする要素。
 * display を指定した要素はブラウザ既定の [hidden]{display:none} に勝ってしまい、
 * hidden にしても消えないため、明示的に打ち消しておく。 */
.kky-chip[hidden],
.kky-card[hidden],
.kky-empty[hidden],
.kky-filter__reset[hidden] {
	display: none !important;
}