/* A案「やさしいビジネス」。サービス画面だけに適用する共通の見た目。
   各appのレイアウト・状態クラス・sentiment色は元のCSS/JSが引き続き担当する。 */
.friendly-business {
    --font-body: "IBM Plex Sans", "Hiragino Sans", "Noto Sans JP", sans-serif;
    --color-bg-page: #f6f9fc;
    --color-bg-shell: #f6f9fc;
    --color-text-primary: #18334d;
    --color-text-secondary: #465e73;
    --color-text-muted: #61768a;
    --color-text-placeholder: #74869a;
    --color-border: #dce6ee;
    --color-border-light: #edf2f7;
    --color-border-hover: #a6c8d4;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 2px 6px rgb(30 66 91 / 3%);
    --shadow-md: 0 8px 24px rgb(30 66 91 / 6%);
    --shadow-lg: 0 16px 40px rgb(30 66 91 / 12%);
    --sidebar-width: 300px;
    height: 100dvh;
    background: var(--color-bg-page);
    font-size: 14px;
}

.friendly-business > [class^="service-"] {
    --color-accent: #087f8c;
    --color-accent-hover: #076570;
    --color-accent-text: #086b77;
    --color-accent-light: #eef9fa;
    --color-accent-bg: #def1f4;
    --color-accent-focus-ring: rgb(8 127 140 / 15%);
    --header-accent-border: #a8d8df;
    --map-accent: #087f8c;
    --map-accent-hover: #076570;
    flex: 1;
    height: auto;
    min-height: 0;
}

.skip-to-content {
    position: fixed;
    top: 8px;
    left: 12px;
    z-index: 2000;
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    background: #076570;
    transform: translateY(-160%);
    clip-path: inset(50%);
}
.skip-to-content:focus { transform: translateY(0); clip-path: none; }
.friendly-business :focus-visible {
    outline: 3px solid #16899c;
    outline-offset: 3px;
}

.suite-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 76px;
    gap: 24px;
    padding: 0 32px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}
.suite-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #18334d;
    font-size: 23px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}
.suite-brand img { object-fit: contain; }
.suite-brand-caption {
    display: block;
    margin-top: 1px;
    color: #61768a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
}
.suite-links { display: flex; align-self: stretch; gap: 6px; }
.suite-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 15px;
    color: #536b80;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.suite-link i { font-size: 14px; }
.suite-link:hover { color: #086b77; background: #f5fafb; }
.suite-link[aria-current="page"] { color: #087f8c; background: #f1fafb; }
.suite-link[aria-current="page"]::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #079aaa;
}

.friendly-business .app-header {
    position: relative;
    height: auto;
    min-height: 96px;
    padding: 14px 24px;
    gap: 24px;
    color: var(--color-text-primary);
    background:
        radial-gradient(circle at 79% 5%, rgb(183 229 236 / 35%) 0 60px, transparent 61px),
        radial-gradient(circle at 86% 95%, rgb(196 225 245 / 35%) 0 85px, transparent 86px),
        linear-gradient(110deg, #eef7fd, #f2fafb);
    border-bottom: 1px solid #dfedf3;
    box-shadow: none;
    backdrop-filter: none;
}
.friendly-business .header-left { flex-direction: column; align-items: flex-start; gap: 4px; }
.friendly-business .app-brand { gap: 12px; }
.friendly-business .app-logo-shell {
    width: 38px;
    height: 38px;
    border: 1px solid #d4eaf0;
    border-radius: 14px;
    background: rgb(255 255 255 / 85%);
    box-shadow: none;
}
.friendly-business .app-heading { gap: 4px; }
.friendly-business .app-brand-name { color: #537a91; font-size: 11px; font-weight: 500; }
.friendly-business .app-title { color: #18334d; font-size: 22px; line-height: 1.35; white-space: normal; }
.friendly-business .app-subtitle {
    max-width: none;
    margin-left: 50px;
    color: #526e82;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
}
.friendly-business .header-action-btn,
.friendly-business .help-panel-toggle {
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #c8dfe7;
    border-radius: 10px;
    color: #365d71;
    background: rgb(255 255 255 / 90%);
    font-size: 12px;
    box-shadow: none;
}
.friendly-business .header-action-btn:hover,
.friendly-business .help-panel-toggle:hover,
.friendly-business .help-panel[open] .help-panel-toggle {
    color: #086b77;
    background: #fff;
    border-color: #82bdc8;
}
.friendly-business .help-panel-content { background: #fff; }

.friendly-business .container {
    gap: 20px;
    padding: 20px 24px 24px;
    background: var(--color-bg-page);
}
.friendly-business .sidebar {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.friendly-business .main {
    padding: 4px 4px 16px;
    background: transparent;
}
.friendly-business .service-guide-card { padding: 18px; background: #f3fafc; }
.friendly-business .service-guide-eyebrow { font-size: 10px; }
.friendly-business .service-guide-title { font-size: 16px; }
.friendly-business .service-guide-description,
.friendly-business .service-guide-points { font-size: 12px; line-height: 1.8; }
.friendly-business .service-guide-points { margin-top: 10px; }
.friendly-business .service-guide-actions { margin-top: 10px; }
.friendly-business .search-box { padding: 18px; }
.search-field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.friendly-business .search-input,
.friendly-business .custom-search-input,
.friendly-business .map-search-form input {
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid #ccdce6;
    border-radius: 10px;
    color: var(--color-text-primary);
    background: #fff;
    font-family: var(--font-body);
    font-size: 14px;
}
.friendly-business .sidebar-header { padding: 12px 18px; background: #f8fbfd; color: #536c80; }
.friendly-business .genre-label { padding-top: 12px; padding-bottom: 12px; }
.friendly-business .main-title { font-size: 20px; }
.friendly-business .main-header { align-items: center; padding-bottom: 16px; }
.friendly-business .article-list { gap: 14px; }
.friendly-business .article-card { padding: 20px 22px; background: #fff; box-shadow: var(--shadow-sm); }
.friendly-business .article-card.has-sentiment-positive,
.friendly-business .article-card.has-sentiment-negative,
.friendly-business .article-card.has-sentiment-neutral { padding-left: 32px; }
.friendly-business .article-card:hover {
    transform: translateY(-1px);
    border-color: #abcfd9;
    box-shadow: 0 6px 18px rgb(30 66 91 / 7%);
}
.friendly-business .article-title { font-size: 16px; line-height: 1.65; }
.friendly-business .article-description { font-size: 13px; line-height: 1.85; color: #52697d; }
.friendly-business .article-meta { gap: 10px; margin-bottom: 10px; }
.friendly-business .article-source { background: #eef7fb; color: #426780; border-color: #dfedf4; }
.friendly-business .article-tag { border-color: #dbe9ef; background: #f5fafc; color: #436c81; }
.friendly-business .article-tag:hover { background: #e6f4f6; color: #086b77; }
.friendly-business .load-more-btn { min-height: 44px; border-radius: 10px; }
.friendly-business .footer { color: #61768a; }

/* 地図とグラフは残りの高さに収め、ナビ追加で100vhを超えないようにする。 */
.friendly-business .map-search-bar {
    gap: 12px;
    padding: 16px 24px;
    background: #fff;
}
.friendly-business .map-search-btn { min-height: 44px; padding: 10px 24px; font-size: 14px; }
.friendly-business .map-metric-switch { background: #f3f7fa; }
.friendly-business .map-main,
.friendly-business .graph-main { column-gap: 16px; padding: 20px 24px 0; }
.friendly-business .map-column,
.friendly-business .graph-column { padding: 0; }
.friendly-business .map-container { background: #fbfdff; box-shadow: var(--shadow-sm); }
.friendly-business .okinawa-inset {
    top: 20px;
    left: 20px;
    width: clamp(110px, 22%, 210px);
    height: clamp(95px, 26%, 170px);
}
.friendly-business .graph-container {
    background-color: #fbfdff;
    background-image: radial-gradient(#d9e7f0 1px, transparent 1px);
    background-size: 20px 20px;
}
.friendly-business .detail-sidebar {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.friendly-business .sidebar-placeholder { padding: 24px; color: #61768a; }
.friendly-business .sidebar-placeholder p { line-height: 1.9; }
.friendly-business .detail-sidebar .article-list a { background: #fff; border-radius: 10px; }
.friendly-business .detail-sidebar .article-title { font-size: 14px; line-height: 1.7; }
.friendly-business .graph-footer,
.friendly-business .map-footer { padding: 10px 0; }

@media (max-width: 1100px) {
    .suite-nav { padding: 0 20px; gap: 16px; }
    .suite-link { padding: 12px 9px; font-size: 12px; }
    .suite-link i { display: none; }
    .friendly-business .app-header { padding: 14px 20px; }
    .friendly-business .header-right { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 980px) {
    .friendly-business { height: auto; min-height: 100dvh; }
    .suite-nav { flex-wrap: wrap; gap: 0; padding-top: 14px; }
    .suite-brand { margin-bottom: 10px; }
    .suite-links { width: 100%; overflow-x: auto; }
    .suite-link { flex: 1 0 auto; min-height: 48px; }
    .friendly-business .map-main,
    .friendly-business .graph-main { padding: 16px 16px 0; gap: 16px; }
    .friendly-business .map-column,
    .friendly-business .graph-column { padding: 0; min-height: 58vh; }
    .friendly-business .map-container,
    .friendly-business .graph-container { min-height: 58vh; }
    .friendly-business .map-main > .detail-sidebar { width: 100%; }
    .friendly-business .detail-sidebar { min-height: 170px; }
}
@media (max-width: 900px) {
    .friendly-business .container { padding: 16px; gap: 20px; }
    .friendly-business .sidebar { max-height: 44vh; }
    .friendly-business .main { padding: 0; }
    .friendly-business .main-header { align-items: flex-start; }
}
@media (max-width: 640px) {
    .suite-nav { padding-left: 16px; padding-right: 16px; }
    .suite-brand { font-size: 21px; }
    .suite-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible; }
    .suite-link { min-height: 44px; padding: 10px 4px; font-size: 11px; }
    .friendly-business .app-header { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
    .friendly-business .app-title { font-size: 20px; }
    .friendly-business .app-brand-name { font-size: 10px; line-height: 1.6; }
    .friendly-business .app-subtitle { margin-left: 0; font-size: 12px; }
    .friendly-business .header-right { justify-content: flex-start; gap: 8px; }
    .friendly-business .help-panel-content { left: 12px; right: 12px; width: auto; }
    .friendly-business .map-search-bar { padding: 16px; }
    .friendly-business .map-search-form { min-width: 0; flex-basis: 100%; }
    .friendly-business .map-status { min-width: 0; flex-basis: 100%; }
    .friendly-business .article-card { padding: 16px; }
    .friendly-business .article-title { font-size: 15px; }
    .friendly-business .article-meta { flex-wrap: wrap; }
    .friendly-business .okinawa-inset {
        top: 16px;
        left: 16px;
        width: 120px;
        height: 110px;
        padding: 6px;
    }
    .friendly-business .sidebar-placeholder { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
    .friendly-business *, .friendly-business *::before, .friendly-business *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}