.hokusetsu-portal {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, “Noto Sans JP”, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
color: #334155;
line-height: 1.65;
max-width: 1140px;
margin: 0 auto 30px;
padding: 0 10px;
box-sizing: border-box;
}

/* Hide default page header on front portal */
.home .entry-title,
.home .entry-meta,
.home #breadcrumb,
.home .sns-share,
.home .page-header {
display: none !important;
}
.home .entry-content {
padding-top: 0 !important;
}

.hokusetsu-portal * {
box-sizing: border-box;
}

/* — Hero Banner — */
.hp-hero {
background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #fef3c7 100%);
border: 1.5px solid #86efac;
border-radius: 18px;
padding: 36px 24px;
margin-bottom: 35px;
text-align: center;
position: relative;
box-shadow: 0 8px 25px -4px rgba(154, 52, 18, 0.08);
}

.hp-hero-badge {
display: inline-block;
background: #1b4332;
color: #ffffff;
font-size: 12px;
font-weight: 800;
padding: 5px 16px;
border-radius: 20px;
letter-spacing: 0.08em;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25);
}

.hp-hero-title {
font-size: 26px;
font-weight: 900;
color: #0f172a;
margin: 0 0 12px;
line-height: 1.4;
}

.hp-hero-desc {
font-size: 14.5px;
color: #475569;
margin: 0 auto 18px;
max-width: 780px;
line-height: 1.7;
}

.hp-hero-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}

.hp-hero-tag {
background: #ffffff;
border: 1px solid #cbd5e1;
color: #0369a1;
font-size: 12px;
font-weight: bold;
padding: 4px 12px;
border-radius: 6px;
}

/* — Section Heading — */
.hp-section-head {
display: flex;
align-items: center;
gap: 10px;
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e8f0;
position: relative;
}

.hp-section-head::after {
content: ”;
position: absolute;
bottom: -2px;
left: 0;
width: 70px;
height: 2px;
background: #1b4332;
}

.hp-section-icon {
font-size: 24px;
line-height: 1;
}

.hp-section-title {
font-size: 20px;
font-weight: 800;
color: #0f172a;
margin: 0;
}

.hp-section-sub {
font-size: 12.5px;
color: #94a3b8;
font-weight: normal;
margin-left: auto;
}

/* — 5大カテゴリ・目的別クイックナビ — */
.hp-quick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-bottom: 30px;
}

.hp-quick-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 22px 20px;
display: flex;
flex-direction: column;
transition: all 0.25s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
text-decoration: none;
}

.hp-quick-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -4px rgba(154, 52, 18, 0.12);
border-color: #86efac;
}

.hp-card-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.hp-card-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}

.hp-card-title {
font-size: 16px;
font-weight: 800;
color: #0f172a;
margin: 0;
}

.hp-card-desc {
font-size: 13px;
color: #64748b;
margin: 0 0 14px;
line-height: 1.55;
flex-grow: 1;
}

.hp-card-links {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px dashed #e2e8f0;
padding-top: 12px;
}

.hp-card-links li {
margin-bottom: 8px;
font-size: 13px;
line-height: 1.45;
}

.hp-card-links li:last-child {
margin-bottom: 0;
}

.hp-card-links a {
color: #1e293b;
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}

.hp-card-links a:hover {
color: #1b4332;
text-decoration: underline;
}

/* — 特集ピックアップバナー — */
.hp-featured-box {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border-radius: 16px;
padding: 28px 24px;
color: #ffffff;
margin-bottom: 35px;
position: relative;
overflow: hidden;
}

.hp-featured-badge {
background: #38bdf8;
color: #0f172a;
font-size: 11.5px;
font-weight: 800;
padding: 3px 12px;
border-radius: 20px;
display: inline-block;
margin-bottom: 10px;
}

.hp-featured-title {
font-size: 21px;
font-weight: 900;
color: #ffffff;
margin: 0 0 10px;
line-height: 1.4;
}

.hp-featured-desc {
font-size: 13.5px;
color: #cbd5e1;
margin: 0 0 18px;
line-height: 1.65;
max-width: 800px;
}

.hp-featured-btn {
display: inline-block;
background: #1b4332;
color: #ffffff;
padding: 10px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
transition: background 0.2s;
}

.hp-featured-btn:hover {
background: #143527;
}

/* — エリア別・定住住み心地グリッド — */
.hp-area-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-bottom: 35px;
}

.hp-area-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 18px;
text-decoration: none;
transition: all 0.2s;
border-left: 4px solid #1b4332;
}

.hp-area-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
border-color: #86efac;
}

.hp-area-name {
font-size: 16px;
font-weight: 800;
color: #0f172a;
margin: 0 0 6px;
}

.hp-area-tag {
display: inline-block;
background: #f1f5f9;
color: #475569;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
margin-bottom: 8px;
}

.hp-area-desc {
font-size: 12.5px;
color: #64748b;
margin: 0;
line-height: 1.5;
}

/* — 5ステップ・マイホーム定住ロードマップ — */
.hp-roadmap {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 35px;
}

.hp-step-item {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 16px 20px;
text-decoration: none;
transition: all 0.2s;
}

.hp-step-item:hover {
border-color: #1b4332;
background: #f8fafc;
transform: translateX(4px);
}

.hp-step-badge {
background: #1b4332;
color: #ffffff;
font-size: 11.5px;
font-weight: 800;
padding: 4px 10px;
border-radius: 6px;
margin-right: 18px;
flex-shrink: 0;
}

.hp-step-info {
flex-grow: 1;
}

.hp-step-title {
font-size: 15px;
font-weight: 800;
color: #0f172a;
margin: 0 0 4px;
}

.hp-step-desc {
font-size: 12.5px;
color: #64748b;
margin: 0;
}

.hp-step-arrow {
font-size: 16px;
color: #94a3b8;
margin-left: 14px;
}

/* — 4大専門メディア連携 — */
.hp-network-box {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border-radius: 16px;
padding: 26px 22px;
color: #ffffff;
margin-top: 40px;
}