/* PLAN-3 — /ja/hojokin/ only. Palette taken from the site's development.css:
   dark #0b1217, yellow #fab909, blue #236ab5, grey #a8a8a8. */

.hojokin-page {
	background: #fff;
	color: #333;
}

/* The site's other inner pages drop straight into a full-width banner, which
   is what separates them from the menu. These pages start with text, so they
   need the rule and the breathing room drawn explicitly. */
.hojokin-page header { border-bottom: 1px solid #ececec; }
.hojokin-main { padding-top: 38px; }
.hojokin-hero + .hojokin-main { padding-top: 0; }
.hojokin-main > .crumbs:first-child { margin-top: 0; }

.hojokin-hero {
	background: #0b1217;
	color: #fff;
	padding: 56px 0 44px;
	margin-bottom: 34px;
}
.hojokin-hero h1 {
	font-size: 34px;
	line-height: 1.35;
	margin: 0 0 16px;
	color: #fff;
	font-weight: 700;
}
.hojokin-hero .lead {
	font-size: 16px;
	line-height: 1.9;
	color: #d6d6d6;
	max-width: 820px;
	margin-bottom: 22px;
}
.hojokin-hero .lead strong { color: #fab909; }
.hojokin-hero .hero-cta a {
	display: inline-block;
	background: #fab909;
	color: #0b1217;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 3px;
	margin: 0 10px 8px 0;
	text-decoration: none;
}
.hojokin-hero .hero-cta a.ghost {
	background: transparent;
	color: #fab909;
	border: 1px solid #fab909;
}
.hojokin-hero .hero-cta a:hover { opacity: .88; }

.hojokin-main { padding-bottom: 60px; }
.hojokin-main h2 {
	font-size: 22px;
	margin: 38px 0 14px;
	padding-left: 12px;
	border-left: 4px solid #fab909;
	line-height: 1.4;
}

.crumbs {
	font-size: 13px;
	color: #888;
	margin: 22px 0 18px;
}
.crumbs a { color: #236ab5; }

/* ------------------------------------------------------------- filters -- */
.hojokin-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	background: #f7f7f7;
	border: 1px solid #e6e6e6;
	padding: 16px 18px;
	border-radius: 4px;
	margin-bottom: 26px;
}
.hojokin-filters label {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: 700;
	color: #555;
	margin: 0;
	gap: 5px;
}
.hojokin-filters label.grow { flex: 1 1 220px; }
.hojokin-filters select,
.hojokin-filters input {
	font-weight: 400;
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	min-width: 160px;
	width: 100%;
}
.hojokin-filters .hits {
	margin-left: auto;
	font-size: 14px;
	color: #555;
	padding-bottom: 8px;
}
.hojokin-filters .hits span { font-weight: 700; color: #0b1217; font-size: 18px; }

/* --------------------------------------------------------------- cards -- */
.hojokin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}
.hojokin-card {
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	background: #fff;
	transition: box-shadow .15s ease;
}
.hojokin-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); }
.hojokin-card[hidden] { display: none; }
.hojokin-card .card-top {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
}
.hojokin-card h3 {
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 12px;
}
.hojokin-card h3 a { color: #0b1217; text-decoration: none; }
.hojokin-card h3 a:hover { color: #236ab5; }
.hojokin-card dl {
	margin: 0 0 12px;
	font-size: 13px;
	border-top: 1px solid #f0f0f0;
}
.hojokin-card dl > div {
	display: flex;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid #f0f0f0;
}
.hojokin-card dt {
	flex: 0 0 84px;
	color: #888;
	font-weight: 400;
}
.hojokin-card dd { margin: 0; flex: 1; }
.hojokin-card .excerpt {
	font-size: 13px;
	line-height: 1.8;
	color: #666;
	margin: 0 0 14px;
}
.hojokin-card .more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: #236ab5;
	text-decoration: none;
}

.badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 2px;
	color: #fff;
	background: #a8a8a8;
	white-space: nowrap;
}
.badge.urgent { background: #ff2020; }
.badge.soon   { background: #fab909; color: #0b1217; }
.badge.ok     { background: #00ad32; }
.badge.open   { background: #236ab5; }
.badge.over   { background: #888; }

.tag-program {
	font-size: 12px;
	padding: 4px 9px;
	border: 1px solid #236ab5;
	color: #236ab5;
	border-radius: 2px;
}

.hojokin-empty {
	text-align: center;
	color: #888;
	padding: 40px 0;
}

/* --------------------------------------------------------------- detail -- */
.hojokin-detail .detail-head { margin: 6px 0 22px; }
.hojokin-detail .detail-head h1 {
	font-size: 27px;
	line-height: 1.5;
	margin: 12px 0 6px;
	color: #0b1217;
}
.hojokin-program { font-size: 14px; color: #555; }

.hojokin-closed {
	background: #fff4f4;
	border: 1px solid #f3c9c9;
	padding: 14px 18px;
	border-radius: 3px;
	margin-bottom: 20px;
	font-size: 14px;
}

.hojokin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 10px;
}
.hojokin-table th,
.hojokin-table td {
	border: 1px solid #e6e6e6;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	line-height: 1.7;
}
.hojokin-table th {
	background: #f7f7f7;
	width: 30%;
	font-weight: 700;
	color: #555;
	white-space: nowrap;
}

.hojokin-body {
	font-size: 15px;
	line-height: 1.95;
	border: 1px solid #eee;
	background: #fcfcfc;
	padding: 18px 22px;
	border-radius: 3px;
	overflow-wrap: break-word;
}
.hojokin-body p { margin: 0 0 12px; }
.hojokin-body ul, .hojokin-body ol { padding-left: 22px; }
.hojokin-body table { width: 100%; border-collapse: collapse; }
.hojokin-body td, .hojokin-body th { border: 1px solid #e0e0e0; padding: 6px 10px; }

.official-wrap { margin: 16px 0 0; }
a.official {
	display: inline-block;
	background: #236ab5;
	color: #fff;
	padding: 12px 22px;
	border-radius: 3px;
	font-weight: 700;
	text-decoration: none;
}
a.official:hover { opacity: .9; color: #fff; }

.hojokin-why { font-size: 14px; line-height: 1.9; color: #555; }
.kwlist { margin: 10px 0 18px; }
.kwlist .kw {
	display: inline-block;
	background: #f0f4f9;
	color: #236ab5;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 12px;
	margin: 0 6px 6px 0;
}

/* ------------------------------------------------------------------ CTA -- */
.hojokin-cta {
	background: #0b1217;
	color: #fff;
	padding: 32px 34px 34px;
	border-radius: 4px;
	margin: 40px 0 30px;
}
.hojokin-cta h2 {
	color: #fff;
	border-left-color: #fab909;
	margin-top: 0;
	font-size: 23px;
}
.hojokin-cta p { color: #cfcfcf; font-size: 14px; line-height: 1.9; }
.hojokin-form-target {
	background: rgba(250,185,9,.12);
	border-left: 3px solid #fab909;
	padding: 10px 14px;
	margin: 16px 0;
}
.hojokin-form-target strong { color: #fab909; }
.cta-actions { margin: 20px 0 8px; }
a.cta-btn {
	display: inline-block;
	background: #fab909;
	color: #0b1217;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 34px;
	border-radius: 3px;
	text-decoration: none;
}
a.cta-btn:hover { opacity: .9; color: #0b1217; text-decoration: none; }

.hojokin-form input,
.hojokin-form select,
.hojokin-form textarea {
	width: 100%;
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 1px solid #2b3840;
	background: #16212a;
	color: #fff;
	border-radius: 3px;
	font-size: 14px;
}
.hojokin-form textarea { min-height: 120px; resize: vertical; }
.hojokin-form input::placeholder,
.hojokin-form textarea::placeholder { color: #8b98a2; }
.hojokin-form button {
	background: #fab909;
	color: #0b1217;
	border: 0;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 34px;
	border-radius: 3px;
	cursor: pointer;
}
.hojokin-form button:hover { opacity: .9; }
.hojokin-note { font-size: 12px; color: #9aa4ac; margin-top: 16px; }

.hojokin-msg { font-size: 15px; margin: 10px 0; }
.hojokin-msg.ok  { color: #7ee08f; }
.hojokin-msg.err { color: #ff8a8a; }

/* --------------------------------------------------------------- links -- */
.hojokin-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 46px;
}
.hojokin-links ul { list-style: none; padding: 0; margin: 0; }
.hojokin-links li { padding: 7px 0; border-bottom: 1px solid #f0f0f0; }
.hojokin-links a { color: #236ab5; font-size: 14px; }

.hojokin-method {
	font-size: 14px;
	line-height: 1.95;
	color: #444;
	background: #fbfbfb;
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 18px 24px;
}
.hojokin-method ol { padding-left: 22px; margin: 12px 0 16px; }
.hojokin-method li { margin-bottom: 6px; }
.hojokin-method em { font-style: normal; background: #fff3cd; padding: 1px 5px; border-radius: 2px; }

.sum-list { list-style: none; padding: 0; }
.sum-list li {
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}
.sum-list .when { color: #888; white-space: nowrap; }

/* --------------------------------------------------------- attribution -- */
.hojokin-attribution {
	margin-top: 46px;
	padding: 18px 20px;
	background: #f7f7f7;
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.85;
	color: #666;
}
.hojokin-attribution p { margin: 0 0 6px; }
.hojokin-attribution .src { font-weight: 700; color: #333; }
.hojokin-attribution .disc { color: #b35b00; }

.hojokin-stamp { font-size: 12px; color: #a8a8a8; margin-top: 22px; }
.hojokin-kyoka { font-size: 12px; color: #a8a8a8; line-height: 1.8; margin-top: 14px; }

/* ---------------------------------------------------------- guide pages -- */
.hojokin-guide h1 {
	font-size: 29px;
	line-height: 1.5;
	margin: 10px 0 18px;
	color: #0b1217;
}
.hojokin-guide .guide-lead {
	font-size: 16px;
	line-height: 1.95;
	color: #444;
	border-left: 4px solid #fab909;
	padding-left: 16px;
	margin-bottom: 30px;
}
.hojokin-guide p, .hojokin-guide li { font-size: 15px; line-height: 1.95; }
.hojokin-guide ul { padding-left: 22px; }
.hojokin-guide .updated { font-size: 12px; color: #999; }

@media (max-width: 767px) {
	.hojokin-hero { padding: 34px 0 30px; }
	.hojokin-hero h1 { font-size: 24px; }
	.hojokin-grid { grid-template-columns: 1fr; }
	.hojokin-filters .hits { margin-left: 0; }
	.hojokin-cta { padding: 24px 20px 26px; }
	.hojokin-table th { width: 38%; white-space: normal; }
}
@media (min-width: 768px) {
	.sp-br { display: none; }
}