/*
 * 金継ぎ教室マップ コア用のCSS。
 *
 * テーマ側のCSS（SWELLなど）と衝突しないよう、次を意図的に外してあります。
 *   ・body / a / img / h1〜h4 などの要素セレクタ
 *   ・ヘッダー、パンくず、フッターの指定
 * クラス名は ks- で始まるものだけなので、テーマの見た目には影響しません。
 */
@charset "UTF-8";
/*
 * Kintsugi Map テーマのスタイル。
 * 色は「墨（黒）・生成り（白）・金」の3色を軸にしています。
 */

:root {
	--ks-ink: #1c1a17;
	--ks-ink-soft: #5b544c;
	--ks-line: #e2ddd4;
	--ks-bg: #fdfcfa;
	--ks-bg-soft: #f6f2ea;
	--ks-gold: #b08d3f;
	--ks-gold-soft: #d8bd7f;
	--ks-gold-pale: #f0e5cd;
	--ks-radius: 10px;
	--ks-shadow: 0 1px 2px rgba(28, 26, 23, .06), 0 8px 24px rgba(28, 26, 23, .06);
	--ks-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
	--ks-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
}

/* ---------- 土台 ---------- */


.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.ks-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--ks-ink); color: #fff; padding: 10px 16px; z-index: 100;
}
.ks-skip:focus { left: 0; color: #fff; }

.ks-container { width: min(1120px, 92vw); margin-inline: auto; }
.ks-narrow { width: min(760px, 92vw); }

/* ---------- ヒーロー ---------- */

.ks-hero {
	background:
		radial-gradient(1200px 380px at 78% -10%, var(--ks-gold-pale), transparent 65%),
		var(--ks-bg);
	padding: 56px 0 40px;
	text-align: center;
}
.ks-hero__lead {
	display: inline-block; margin: 0 0 14px;
	font-size: 12px; letter-spacing: .16em;
	border: 1px solid var(--ks-gold-soft); color: var(--ks-gold);
	border-radius: 999px; padding: 5px 16px;
}
.ks-hero__title { margin: 0 0 16px; font-size: clamp(26px, 5vw, 42px); letter-spacing: .04em; }
.ks-hero__text { margin: 0; color: var(--ks-ink-soft); font-size: 15px; }

/* ---------- セクション ---------- */

.ks-section { padding: 56px 0; }
.ks-section--map { background: var(--ks-bg-soft); }
.ks-section--about { background: var(--ks-bg-soft); }

.ks-section__title { margin: 0 0 6px; text-align: center; }
.ks-section__jp { display: block; font-size: clamp(21px, 3.4vw, 28px); letter-spacing: .06em; }
.ks-section__en {
	display: block; margin-top: 6px;
	font-family: var(--ks-sans); font-size: 11px; letter-spacing: .28em; color: var(--ks-gold);
}
.ks-section__desc { text-align: center; color: var(--ks-ink-soft); font-size: 14px; margin: 10px 0 28px; }

.ks-subheading {
	margin: 40px 0 16px; font-size: 19px; letter-spacing: .04em;
	padding-left: 12px; border-left: 3px solid var(--ks-gold);
}

/* ---------- 日本地図 ---------- */

.ks-map { position: relative; margin: 0 auto; max-width: 720px; }
.ks-map__canvas svg { width: 100%; height: auto; display: block; }

.ks-map .prefecture polygon,
.ks-map .prefecture path {
	fill: #e6e1d8;
	stroke: var(--ks-bg-soft);
	stroke-width: 1.4;
	transition: fill .15s ease;
}
.ks-map .prefecture.has-schools polygon,
.ks-map .prefecture.has-schools path { fill: var(--ks-gold-soft); cursor: pointer; }
.ks-map .prefecture.has-schools.level-2 polygon,
.ks-map .prefecture.has-schools.level-2 path { fill: #c9a55c; }
.ks-map .prefecture.has-schools.level-3 polygon,
.ks-map .prefecture.has-schools.level-3 path { fill: var(--ks-gold); }
.ks-map .prefecture.has-schools:hover polygon,
.ks-map .prefecture.has-schools:hover path,
.ks-map .prefecture.is-focus polygon,
.ks-map .prefecture.is-focus path { fill: var(--ks-ink); }
.ks-map .prefecture.has-schools { outline: none; }

.ks-map__tip {
	position: absolute; z-index: 5; pointer-events: none;
	background: var(--ks-ink); color: #fff;
	font-size: 13px; line-height: 1.5;
	padding: 6px 12px; border-radius: 6px;
	white-space: nowrap; transform: translate(-50%, -130%);
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.ks-map__tip-count { margin-left: 8px; color: var(--ks-gold-soft); }

.ks-map__legend {
	display: flex; justify-content: center; gap: 18px;
	margin-top: 12px; font-size: 12px; color: var(--ks-ink-soft);
}
.ks-map__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ks-map__legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* ---------- 地方別リスト ---------- */

.ks-regions {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ks-regions__block {
	background: #fff; border: 1px solid var(--ks-line);
	border-radius: var(--ks-radius); padding: 16px 18px;
}
.ks-regions__title {
	margin: 0 0 10px; font-size: 15px; letter-spacing: .06em;
	padding-bottom: 8px; border-bottom: 1px solid var(--ks-line);
}
.ks-regions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.ks-regions__list li { font-size: 13.5px; }
.ks-regions__list a { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.ks-regions__list .is-empty span { display: flex; justify-content: space-between; color: #b7b0a5; padding: 3px 0; }

.ks-count {
	font-size: 11px; color: var(--ks-gold);
	background: var(--ks-gold-pale); border-radius: 999px;
	padding: 1px 8px; margin-left: 6px; font-family: var(--ks-sans);
}
.is-empty .ks-count { background: #efece6; color: #b7b0a5; }

/* ---------- カード ---------- */

.ks-grid {
	display: grid; gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ks-grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.ks-card {
	position: relative; /* おすすめバッジの位置決めの基準 */
	background: #fff; border: 1px solid var(--ks-line);
	border-radius: var(--ks-radius); overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ks-card:hover { transform: translateY(-3px); box-shadow: var(--ks-shadow); }
.ks-card__link { display: block; height: 100%; }
.ks-card__thumb {
	position: relative; aspect-ratio: 16 / 10; background: var(--ks-bg-soft);
	display: grid; place-items: center; overflow: hidden;
}
.ks-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 写真が無いときは、金継ぎ風の絵（SVG）を敷く。
   絵は inc/placeholder.php で教室ごとに形を変えて描いている。 */
.ks-card__thumb--noimg { background: #17140f; }
.ks-card__thumb .ks-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ks-card__noimg {
	position: relative;
	font-family: var(--ks-serif); color: #e6d9b8; letter-spacing: .22em; font-size: 12px;
	background: rgba(20, 17, 13, .55); padding: 5px 15px; border-radius: 999px;
	border: 1px solid rgba(216, 189, 127, .35);
}
.ks-card__rank {
	position: absolute; left: 0; top: 12px;
	background: var(--ks-gold); color: #fff;
	font-size: 11px; letter-spacing: .1em; padding: 4px 12px 4px 10px;
	border-radius: 0 999px 999px 0;
}
.ks-card__body { padding: 16px 18px 20px; }
.ks-card__area { margin: 0 0 6px; font-size: 12px; color: var(--ks-gold); letter-spacing: .06em; }
.ks-card__city { color: var(--ks-ink-soft); margin-left: 6px; }
.ks-card__title { margin: 0 0 8px; font-size: 17px; }
.ks-card__catch { margin: 0 0 10px; font-size: 13.5px; color: var(--ks-ink-soft); }
.ks-card__meta { margin: 12px 0 0; font-size: 13px; }
.ks-card__row { display: flex; gap: 10px; padding: 4px 0; border-top: 1px dotted var(--ks-line); }
.ks-card__row dt { flex: 0 0 62px; color: var(--ks-ink-soft); margin: 0; }
.ks-card__row dd { margin: 0; flex: 1; }

.ks-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.ks-rating__stars { color: var(--ks-gold); letter-spacing: .1em; font-size: 14px; }
.ks-rating__num { font-size: 12px; color: var(--ks-ink-soft); }

.ks-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.ks-tags__item {
	font-size: 11.5px; color: var(--ks-ink-soft);
	background: var(--ks-bg-soft); border-radius: 999px; padding: 3px 10px;
}

/* ---------- チップ ---------- */

.ks-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.ks-chips--side { justify-content: flex-start; }
.ks-chip {
	display: inline-flex; align-items: center;
	background: #fff; border: 1px solid var(--ks-line); border-radius: 999px;
	padding: 8px 16px; font-size: 13.5px;
}
.ks-chip:hover { border-color: var(--ks-gold); }

/* ---------- ボタン ---------- */

.ks-more { text-align: center; margin: 32px 0 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ks-btn {
	display: inline-block; padding: 12px 30px;
	border: 1px solid var(--ks-ink); border-radius: 999px;
	font-size: 14px; letter-spacing: .06em; background: #fff;
}
.ks-btn:hover { background: var(--ks-ink); color: #fff; }
.ks-btn--primary { background: var(--ks-gold); border-color: var(--ks-gold); color: #fff; }
.ks-btn--primary:hover { background: var(--ks-ink); border-color: var(--ks-ink); color: #fff; }

/* ---------- 表 ---------- */

.ks-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ks-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; min-width: 460px; }
.ks-table th, .ks-table td { border: 1px solid var(--ks-line); padding: 11px 14px; text-align: left; vertical-align: top; }
.ks-table thead th { background: var(--ks-ink); color: #fff; font-weight: 500; }
.ks-table tbody th { background: var(--ks-bg-soft); font-weight: 500; white-space: nowrap; }
.ks-table--info { min-width: 320px; }

/* ---------- 手順 ---------- */

.ks-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ks-steps li { display: flex; gap: 14px; background: #fff; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); padding: 14px 18px; }
.ks-steps__num {
	flex: 0 0 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ks-gold); color: #fff; font-size: 14px;
}
.ks-steps b { display: block; font-family: var(--ks-serif); }
.ks-steps p { margin: 2px 0 0; font-size: 13.5px; color: var(--ks-ink-soft); }

.ks-note { font-size: 12.5px; color: var(--ks-ink-soft); background: #fff; border-left: 3px solid var(--ks-gold-soft); padding: 10px 14px; margin-top: 16px; }

/* ---------- FAQ ---------- */

.ks-faq details {
	background: #fff; border: 1px solid var(--ks-line);
	border-radius: var(--ks-radius); margin-bottom: 10px; padding: 4px 18px;
}
.ks-faq summary { cursor: pointer; padding: 12px 0; font-family: var(--ks-serif); font-size: 16px; }
.ks-faq summary::marker { color: var(--ks-gold); }
.ks-faq p { margin: 0 0 14px; font-size: 14px; color: var(--ks-ink-soft); }

/* ---------- ページ見出し ---------- */

.ks-pagehead { padding: 34px 0 26px; border-bottom: 1px solid var(--ks-line); background: var(--ks-bg-soft); }
.ks-pagehead__title { margin: 0; font-size: clamp(22px, 4vw, 32px); letter-spacing: .04em; }
.ks-pagehead__sub { margin: 8px 0 0; font-size: 14px; color: var(--ks-ink-soft); }
.ks-pagehead__area { margin: 0 0 6px; font-size: 12px; color: var(--ks-gold); letter-spacing: .08em; }
.ks-pagehead--single .ks-tags { justify-content: flex-start; }

/* ---------- 2カラム ---------- */

.ks-layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) 280px; padding: 40px 0 64px; align-items: start; }
/* min-width:0 が無いと、中の表が横幅を押し広げてページ全体が横スクロールする。 */
.ks-layout__main, .ks-layout__side { min-width: 0; }
@media (max-width: 900px) { .ks-layout { grid-template-columns: 1fr; gap: 32px; } }

.ks-side { background: #fff; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); padding: 18px 20px; margin-bottom: 20px; }
.ks-side__title { margin: 0 0 12px; font-size: 15px; letter-spacing: .06em; padding-bottom: 8px; border-bottom: 1px solid var(--ks-line); }
.ks-side__region { margin: 14px 0 4px; font-size: 12px; color: var(--ks-gold); letter-spacing: .1em; font-family: var(--ks-sans); }
.ks-side__list { list-style: none; margin: 0; padding: 0; }
.ks-side__list li { border-bottom: 1px dotted var(--ks-line); }
.ks-side__list a { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13.5px; }
.ks-side__list .is-current > a { color: var(--ks-gold); font-weight: 600; }
.ks-side__more { margin: 14px 0 0; font-size: 13px; }

/* ---------- 詳細ページ ---------- */

.ks-single__hero { margin: 0 0 28px; border-radius: var(--ks-radius); overflow: hidden; }
.ks-single__hero--noimg { position: relative; aspect-ratio: 16 / 7; background: #17140f; }
.ks-single__herocap {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: rgba(20, 17, 13, .62); color: #d9cdb2;
	font-size: 11.5px; padding: 5px 12px; letter-spacing: .04em;
}
.ks-single__hero--noimg .ks-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ks-single__info, .ks-single__body, .ks-single__related { margin-bottom: 44px; }

.ks-prose { font-size: 15.5px; }
.ks-prose h2 { margin: 40px 0 14px; font-size: 21px; padding-left: 12px; border-left: 3px solid var(--ks-gold); }
.ks-prose h3 { margin: 30px 0 10px; font-size: 18px; }
.ks-prose p { margin: 0 0 1.4em; }
.ks-prose ul, .ks-prose ol { padding-left: 1.4em; }
.ks-prose li { margin-bottom: .4em; }
.ks-prose img { border-radius: var(--ks-radius); }
.ks-prose blockquote { margin: 0 0 1.4em; padding: 12px 18px; background: var(--ks-bg-soft); border-left: 3px solid var(--ks-gold-soft); }

/* ---------- 検索・空状態・ページ送り ---------- */

.ks-search { display: flex; gap: 8px; margin-bottom: 28px; }
.ks-search input {
	flex: 1; border: 1px solid var(--ks-line); border-radius: 999px;
	padding: 10px 18px; font-size: 14px; font-family: inherit; background: #fff;
}
.ks-search button {
	border: 1px solid var(--ks-ink); background: var(--ks-ink); color: #fff;
	border-radius: 999px; padding: 10px 22px; font-size: 14px; cursor: pointer; font-family: inherit;
}

.ks-empty { background: #fff; border: 1px dashed var(--ks-line); border-radius: var(--ks-radius); padding: 40px 24px; text-align: center; }
.ks-empty__title { font-family: var(--ks-serif); font-size: 18px; margin: 0 0 8px; }

.pagination, .navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.page-numbers {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--ks-line); border-radius: 6px; background: #fff; font-size: 14px;
}
.page-numbers.current { background: var(--ks-ink); color: #fff; border-color: var(--ks-ink); }

/* ---------- 詳細ページのブロック ---------- */

.ks-block { margin: 0 0 40px; }
.ks-block__title {
	margin: 0 0 16px; font-size: 19px; letter-spacing: .04em;
	padding-left: 12px; border-left: 4px solid var(--ks-ink);
}

.ks-single__area { margin: 22px 0 6px; font-size: 13px; color: var(--ks-ink-soft); letter-spacing: .04em; }
.ks-single__pin { margin-right: 4px; }
.ks-single__catch {
	margin: 0 0 28px; padding-bottom: 20px;
	font-family: var(--ks-serif); font-size: clamp(17px, 2.6vw, 21px);
	text-align: center; letter-spacing: .04em;
	border-bottom: 2px dotted var(--ks-line);
}
.ks-single__intro { margin: 0 0 24px; font-size: 15px; }
.ks-single__intro p { margin: 0; }

/* おすすめポイントの表 */
/* ラベル＋短い文の2列なので、スマホでも横スクロールさせずに収める */
.ks-table--point, .ks-table--course { min-width: 0; }
.ks-table--point th {
	width: 130px; background: var(--ks-gold-pale); color: var(--ks-ink);
	text-align: center; white-space: nowrap;
}

/* 講座情報のタブ */
.ks-tabs { border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-bg-soft); padding: 16px; }
.ks-tabs__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -1px; }
.ks-tabs__btn {
	flex: 1 1 auto; min-width: 140px;
	background: var(--ks-gold-pale); color: var(--ks-ink-soft);
	border: 1px solid var(--ks-line); border-bottom: none;
	border-radius: 8px 8px 0 0;
	padding: 11px 16px; font-size: 13.5px; font-family: inherit;
	cursor: pointer; line-height: 1.4;
}
.ks-tabs__btn:hover { color: var(--ks-ink); }
.ks-tabs__btn.is-active { background: #fff; color: var(--ks-ink); font-weight: 600; }
.ks-tabs__panel { background: #fff; border: 1px solid var(--ks-line); border-radius: 0 8px 8px 8px; padding: 20px; }
.ks-tabs__nav + .ks-tabs__panel { border-radius: 0 8px 8px 8px; }
.ks-tabs__single { margin: 0 0 14px; font-size: 16px; }
.ks-tabs__label {
	margin: 0 0 10px; font-size: 14px; font-family: var(--ks-serif);
	padding-bottom: 8px; border-bottom: 1px solid var(--ks-line);
}
.ks-tabs__feat { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; }
.ks-tabs__feat li { padding: 3px 0 3px 18px; position: relative; }
.ks-tabs__feat li::before { content: "・"; position: absolute; left: 0; color: var(--ks-gold); }
.ks-table--course th { width: 120px; }
.ks-tabs .ks-more { margin-top: 18px; }

/* 比較表 */
.ks-compare { margin-bottom: 36px; }
.ks-compare__note { margin: 0 0 12px; font-size: 13px; color: var(--ks-ink-soft); }
.ks-table--compare { min-width: 780px; font-size: 13px; }
.ks-table--compare thead th { white-space: nowrap; font-size: 12.5px; }
.ks-table--compare tbody th { background: #fff; font-weight: 600; min-width: 180px; }
.ks-table--compare__name a { text-decoration: underline; text-underline-offset: 3px; }
.ks-table--compare td { min-width: 110px; }
.ks-table--compare__mark { text-align: center; white-space: nowrap; }

/* 公式サイトボタン */
.ks-more--official { margin: 34px 0 0; }
.ks-btn--official {
	background: #b8232b; border-color: #b8232b; color: #fff;
	font-size: 15px; padding: 15px 44px; letter-spacing: .08em;
	box-shadow: 0 2px 0 #8d1a20;
}
.ks-btn--official:hover { background: #9c1c23; border-color: #9c1c23; color: #fff; }
.ks-btn__ext { margin-left: 8px; font-size: 13px; }

/* CONTENTS（目次） */
.ks-toc {
	margin: 40px 0; padding: 20px 22px;
	background: var(--ks-bg-soft); border: 1px solid var(--ks-line); border-radius: var(--ks-radius);
}
.ks-toc__title {
	margin: 0 0 14px; text-align: center;
	font-size: 13px; letter-spacing: .22em; color: var(--ks-ink);
	font-family: var(--ks-sans); font-weight: 600;
}
.ks-toc__list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 8px; padding: 16px 18px; }
.ks-toc__list a { display: inline-flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 14px; }
.ks-toc__num {
	flex: 0 0 22px; height: 22px; border-radius: 4px;
	display: inline-grid; place-items: center;
	background: var(--ks-ink); color: #fff; font-size: 11px;
}
.ks-toc__l3 { padding-left: 32px; }
.ks-toc__l3 a { font-size: 13px; color: var(--ks-ink-soft); }
.ks-toc__l3 a:hover { color: var(--ks-gold); }

/* 口コミ */
.ks-review {
	background: var(--ks-bg-soft); border: 1px solid var(--ks-line);
	border-radius: var(--ks-radius); padding: 18px 20px; margin-bottom: 18px;
}
.ks-review__head {
	margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ks-line);
	font-family: var(--ks-serif); font-size: 15px;
}
.ks-review__body { margin: 0; padding: 0; background: none; border: none; font-size: 14px; }
.ks-review__src { margin: 10px 0 0; font-size: 12px; text-align: right; color: var(--ks-ink-soft); word-break: break-all; }
.ks-review__reply { margin-top: 16px; background: #fff; border-radius: 8px; padding: 14px 16px; }
.ks-review__reply p:last-child { margin: 0; font-size: 14px; }

@media (max-width: 600px) {
	.ks-tabs { padding: 10px; }
	.ks-tabs__panel { padding: 14px; }
	.ks-tabs__btn { min-width: 0; flex: 1 1 100%; border-radius: 8px; border-bottom: 1px solid var(--ks-line); }
	.ks-tabs__nav { margin-bottom: 8px; }
	.ks-tabs__panel { border-radius: 8px; }
	.ks-table--point th { width: 90px; font-size: 13px; }
	.ks-btn--official { padding: 14px 24px; width: 100%; }
}

/* ---------- 動きを減らす設定への配慮 ---------- */

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

.ks-basic__note { display: block; font-size: 12px; color: #7a736a; margin-top: 2px; }