@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&family=Kaisei+Decol:wght@700&family=Noto+Sans+JP:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Shippori+Mincho:wght@600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root {
--cf-orange: #B4532A;
--cf-orange-hover: #9A3412;
--cf-orange-dark: #7C2D12;
--cf-orange-tint: #F8F2EC;
--cf-orange-border: #E4D0C0;
--cf-blue: #355878;
--cf-carbon: #1C1917;
--cf-slate: #44403C;
--cf-muted: #78716C;
--cf-border: #E5E2DC;
--cf-border-strong: #D6D3CD;
--cf-canvas: #FAF9F6;
--cf-surface: #FAF9F6;
--cf-surface-sub: #F3F1EC;
}

html, body, [class*="css"] {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
color: var(--cf-carbon);
font-feature-settings: "palt" 1, "kern" 1, "cv02" 1, "cv03" 1, "cv04" 1, "tnum" 1;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.012em;
}

.stApp {
background-color: #FAF9F6;
}

header[data-testid="stHeader"],
section[data-testid="stSidebar"],
[data-testid="stSidebarCollapseButton"],
[data-testid="collapsedControl"] {
display: none !important;
}

.block-container,
[data-testid="stMainBlockContainer"],
[data-testid="stAppViewBlockContainer"],
[data-testid="stMain"],
[data-testid="stAppViewContainer"] {
padding-top: 0rem !important;
margin-top: 0rem !important;
}
.block-container {
padding-bottom: 3.0rem !important;
padding-left: 2.25rem !important;
padding-right: 2.25rem !important;
max-width: 1480px !important;
margin: 0 auto !important;
}
div[data-testid="stElementContainer"]:has(~ div[data-testid="stElementContainer"] .yf-portal-top-shell),
div[data-testid="stElementContainer"]:has(#wp-global-loader-wrap),
div[data-testid="stElementContainer"].st-key-wp_global_bridge_v2_mount,
div[data-testid="stElementContainer"]:has(.st-key-wp_global_bridge_v2_mount),
div[data-testid="stElementContainer"]:has([data-testid="stBidiComponent"] div[style*="display:none"]),
div[data-testid="stElementContainer"]:has([data-testid="stBidiComponent"] div[style*="display: none"]) {
position: fixed !important;
top: -9999px !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
div[data-testid="stElementContainer"]:has(.yf-portal-top-shell),
div[data-testid="stMarkdownContainer"]:has(.yf-portal-top-shell),
div[data-testid="stElementContainer"]:has(.yf-portal-top-shell) > div {
margin-top: 0px !important;
padding-top: 0px !important;
overflow: visible !important;
max-width: none !important;
}

/* st.container(border=True) はAI的な角丸白箱を廃止し、シャープな上下罫線のみで区切る */
div[data-testid="stVerticalBlockBorderWrapper"] {
background-color: transparent !important;
border: none !important;
border-top: 1px solid #1C1917 !important;
border-bottom: 1px solid var(--cf-border) !important;
border-radius: 0px !important;
box-shadow: none !important;
padding: 16px 0 14px 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}

/* =========================================================
① エディトリアル・フィナンシャルUI グローバルヘッダー・セクション階層・フッター
（角丸ボックス・ドロップシャドウ・ピルバッジを排し、1px水平罫線と余白で設計）
========================================================= */
.portal-util-bar {
background: transparent;
border: none;
border-bottom: 1px solid #E4E4E7;
color: #52525B;
padding: 6px 0;
border-radius: 0;
font-size: 11px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
box-shadow: none;
margin-bottom: 8px;
}
.portal-util-left {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
color: #3F3F46;
}
.portal-util-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
color: #111827;
border: none;
font-family: 'JetBrains Mono', 'Inter', monospace;
font-size: 10.5px;
font-weight: 700;
padding: 0;
border-radius: 0;
letter-spacing: 0.06em;
}
.portal-util-right {
display: flex;
align-items: center;
gap: 12px;
color: #71717A;
font-size: 11px;
}

.portal-header-main {
background: transparent;
border: none;
border-bottom: 1px solid var(--cf-border);
border-radius: 0;
padding: 8px 0 10px 0;
box-shadow: none;
margin-bottom: 10px;
}
.portal-brand-wrap {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.portal-logo-group {
display: flex;
align-items: center;
gap: 12px;
}
.portal-logo-mark {
width: 36px;
height: 36px;
border-radius: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #EA580C;
flex-shrink: 0;
}
.portal-logo-title {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 20px;
font-weight: 800;
color: #111827;
letter-spacing: -0.03em;
line-height: 1.15;
}
.portal-logo-sub {
font-size: 11.5px;
font-weight: 500;
color: #71717A;
margin-top: 2px;
}

/* セクション構造化ヘッダー（角丸の黒塗りボックスを廃止し、新聞・経済誌の水平罫線＋高コントラスト見出しへ刷新） */
.cf-sec-header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin: 34px 0 14px 0;
padding: 10px 0 8px 0;
background: transparent !important;
color: #111827 !important;
border: none !important;
border-top: 2px solid #111827 !important;
border-bottom: 1px solid #E4E4E7 !important;
border-radius: 0 !important;
box-shadow: none !important;
scroll-margin-top: 68px;
}
.cf-sec-header > div {
color: #52525B !important;
}
.cf-sec-title-group {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.cf-eyebrow {
font-family: 'JetBrains Mono', 'Inter', monospace;
font-size: 11px;
font-weight: 700;
color: #EA580C !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.cf-sec-title-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.cf-sec-title-text {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 19px !important;
font-weight: 800 !important;
color: #111827 !important;
letter-spacing: -0.02em;
line-height: 1.3;
}
.cf-sec-header .cf-sec-title-text {
color: #111827 !important;
}

/* トップページ ダイジェスト領域（外周の角丸白箱を廃止し、シャープな上線と下線リストで構成） */
.portal-digest-box {
background: transparent;
border: none;
border-top: 1.5px solid #18181B;
border-bottom: 1px solid #E4E4E7;
border-radius: 0;
padding: 10px 0 4px 0;
box-shadow: none;
height: 100%;
box-sizing: border-box;
}
.portal-digest-box-title {
font-size: 13px;
font-weight: 800;
color: #111827;
padding-bottom: 8px;
margin-bottom: 6px;
border-bottom: 1px solid #E4E4E7;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.portal-digest-item {
padding: 8px 0;
border-bottom: 1px solid #F4F4F5;
font-size: 12px;
line-height: 1.5;
}
.portal-digest-item:last-child {
border-bottom: none;
}

/* トピックス（外周の角丸枠なし・水平ライン区切り） */
.yahoo-topics-card {
background: transparent;
border: none;
border-top: 1.5px solid #18181B;
border-bottom: 1px solid #E4E4E7;
border-radius: 0;
box-shadow: none;
margin-bottom: 16px;
overflow: hidden;
}
.yahoo-topics-header {
background: transparent;
color: #111827;
padding: 8px 0;
border-bottom: 1px solid #E4E4E7;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
}
.yahoo-topic-row {
padding: 8px 0;
border-bottom: 1px solid #F4F4F5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12.5px;
}
.yahoo-topic-row:last-child {
border-bottom: none;
}
.yahoo-topic-row:hover {
background-color: #FAFAFA;
}
details.topic-acc {
border-bottom: 1px solid #F4F4F5;
padding: 0;
margin: 0;
}
details.topic-acc:last-child {
border-bottom: none;
}
details.topic-acc summary {
list-style: none;
cursor: pointer;
padding: 8px 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: #111827;
line-height: 1.45;
user-select: none;
}
details.topic-acc summary::-webkit-details-marker {
display: none;
}
details.topic-acc summary:hover {
background-color: #FAFAFA;
}
.topic-acc-toggle {
font-size: 10px;
font-weight: 600;
color: #52525B;
white-space: nowrap;
flex-shrink: 0;
}
details.topic-acc[open] .topic-acc-toggle::after {
content: " ▲閉じる";
}
details.topic-acc:not([open]) .topic-acc-toggle::after {
content: " ▼根拠・解説";
}
.topic-acc-body {
background: #FAFAFA;
border: none;
border-top: 1px solid #E4E4E7;
border-radius: 0;
padding: 8px 10px;
margin: 0 0 8px 0;
font-size: 11.5px;
color: #3F3F46;
line-height: 1.6;
}

.airbnb-area-card {
background: #FFFFFF;
border: none;
border-bottom: 1px solid var(--cf-border);
border-radius: 0;
padding: 10px 4px;
box-shadow: none;
margin-bottom: 2px;
}
.airbnb-area-card.is-active {
border-bottom: 1.5px solid #18181B;
background: #FAFAFA;
}

.portal-footer-wrap {
background: transparent;
border: none;
border-top: 2px solid #18181B;
border-radius: 0;
padding: 28px 0 20px 0;
margin-top: 44px;
box-shadow: none;
}
.portal-footer-grid {
display: grid;
grid-template-columns: 1.45fr 1.15fr 1.15fr 1.25fr;
gap: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #EAECEF;
}
@media (max-width: 980px) {
.portal-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
.portal-footer-col-title {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 11.5px;
font-weight: 700;
color: #111827;
margin-bottom: 10px;
letter-spacing: 0.02em;
}
.portal-footer-item,
.portal-footer-list span {
display: block;
font-size: 11.5px;
color: #4B5563;
line-height: 1.85;
}
.portal-footer-link {
cursor: pointer;
color: #4B5563;
font-size: 11.5px;
font-weight: 500;
transition: color 0.14s ease;
}
.portal-footer-link:hover {
color: #F6821F !important;
text-decoration: underline;
text-underline-offset: 3px;
}
.portal-footer-brand-title {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 14.5px;
font-weight: 800;
color: #111827;
letter-spacing: -0.02em;
}
.portal-footer-brand-desc {
font-size: 11.5px;
color: #4B5563;
line-height: 1.68;
}
.portal-footer-bottom {
padding-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 11px;
color: #6B7280;
}

div[data-testid="stColumn"] {
min-width: 0 !important;
}

/* =========================================================
② 表示更新時のスマート一括トランジション ＆ 上部プログレスバー表示
（個別要素ごとの [data-stale="true"] 半透明化による「ぱらぱら描画」を防止）
========================================================= */
[data-stale="true"]:not(:has([data-testid="stDateInput"])) {
pointer-events: none !important;
user-select: none !important;
opacity: 1 !important;
transition: none !important;
}

/* ヘッダー・ヒーロー・グローバルナビ・分析室サブタブバーは再描画中も絶対に減光・点滅させない */
div[data-testid="stElementContainer"]:has(.yf-portal-top-shell),
.yf-portal-top-shell,
.yf-portal-top-shell *,
.st-key-act_top_controls,
.st-key-act_top_controls [data-stale="true"] {
opacity: 1 !important;
transition: none !important;
}

/* 分析室4サブタブ＆全セグメントコントロールのクリック直後（0ms）即時アクティブ反映用スタイル */
.stApp div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button.wp-optimistic-subtab-active,
.stApp div[class*="st-key-act_subtab_mode_"] button.wp-optimistic-subtab-active {
background: #FFFFFF !important;
color: #1C1917 !important;
font-weight: 800 !important;
border-top: 2.5px solid #1C1917 !important;
box-shadow: inset 0 -1px 0 #FFFFFF !important;
}
.stApp div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button.wp-optimistic-subtab-active p,
.stApp div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button.wp-optimistic-subtab-active span,
.stApp div[class*="st-key-act_subtab_mode_"] button.wp-optimistic-subtab-active p,
.stApp div[class*="st-key-act_subtab_mode_"] button.wp-optimistic-subtab-active span {
color: #1C1917 !important;
font-weight: 800 !important;
}
.stApp div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-wp-opt-inactive="1"],
.stApp div[class*="st-key-act_subtab_mode_"] button[data-wp-opt-inactive="1"] {
background: #F4F3EF !important;
color: #64748B !important;
font-weight: 700 !important;
border-top: 1px solid #D6D3CD !important;
box-shadow: none !important;
}
.stApp div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-wp-opt-inactive="1"] p,
.stApp div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-wp-opt-inactive="1"] span,
.stApp div[class*="st-key-act_subtab_mode_"] button[data-wp-opt-inactive="1"] p,
.stApp div[class*="st-key-act_subtab_mode_"] button[data-wp-opt-inactive="1"] span {
color: #64748B !important;
font-weight: 700 !important;
}

/* 一般セグメントコントロール（視点切替・指標切替等）の即時アクティブ反映 */
.stApp div[data-testid="stSegmentedControl"]:not([class*="st-key-act_subtab_mode_"]) button.wp-opt-seg-active,
.stApp div[data-testid="stButtonGroup"]:not([class*="st-key-act_subtab_mode_"]) button.wp-opt-seg-active {
background: #18181B !important;
color: #FFFFFF !important;
border-color: #18181B !important;
font-weight: 800 !important;
}
.stApp div[data-testid="stSegmentedControl"]:not([class*="st-key-act_subtab_mode_"]) button.wp-opt-seg-active p,
.stApp div[data-testid="stSegmentedControl"]:not([class*="st-key-act_subtab_mode_"]) button.wp-opt-seg-active span,
.stApp div[data-testid="stButtonGroup"]:not([class*="st-key-act_subtab_mode_"]) button.wp-opt-seg-active p,
.stApp div[data-testid="stButtonGroup"]:not([class*="st-key-act_subtab_mode_"]) button.wp-opt-seg-active span {
color: #FFFFFF !important;
font-weight: 800 !important;
}
.stApp div[data-testid="stSegmentedControl"]:not([class*="st-key-act_subtab_mode_"]) button[data-wp-opt-inactive="1"],
.stApp div[data-testid="stButtonGroup"]:not([class*="st-key-act_subtab_mode_"]) button[data-wp-opt-inactive="1"] {
background: #FFFFFF !important;
color: #52525B !important;
border-color: #CBD5E1 !important;
box-shadow: none !important;
font-weight: 600 !important;
}
.stApp div[data-testid="stSegmentedControl"]:not([class*="st-key-act_subtab_mode_"]) button[data-wp-opt-inactive="1"] p,
.stApp div[data-testid="stSegmentedControl"]:not([class*="st-key-act_subtab_mode_"]) button[data-wp-opt-inactive="1"] span,
.stApp div[data-testid="stButtonGroup"]:not([class*="st-key-act_subtab_mode_"]) button[data-wp-opt-inactive="1"] p,
.stApp div[data-testid="stButtonGroup"]:not([class*="st-key-act_subtab_mode_"]) button[data-wp-opt-inactive="1"] span {
color: #52525B !important;
font-weight: 600 !important;
}

/* =========================================================
スマート・ローディング ＆ 一括フロートイン（ふっと浮かび上がる）UI
========================================================= */
@keyframes wpSmoothFloatIn {
0% {
opacity: 0;
transform: translateY(14px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes wpLoaderSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.st-key-wp_main_content_body,
.st-key-act_sec02_content_body,
.st-key-act_ev_inner_body,
.st-key-act_ev_chart_body,
.st-key-act_t1_content_body,
.st-key-act_venn_drill_body {
opacity: 1;
transform: translateY(0);
will-change: opacity, transform;
}

/* ① ロード中マスク：要素がかくかくと順番に出てくる途中経過を完全に隠し、ローダーのみを見せる（※グラフ単体切替 ev-chart は消さずにその場で滑らかに遷移） */
.stApp.wp-tab-switching .st-key-wp_main_content_body,
.stApp.wp-action-switching .st-key-wp_main_content_body,
.stApp.wp-subtab-switching div[data-testid="stVerticalBlock"] > div:has(div[class*="st-key-act_subtab_mode_"]) ~ div,
.stApp.wp-subtab-switching div[class*="st-key-act_subtab_mode_"] ~ div,
.stApp.wp-subtab-switching .st-key-ar_subtab_nav ~ div,
.stApp.wp-sec02-switching .st-key-act_sec02_content_body,
.stApp.wp-sec02-switching div[data-testid="stVerticalBlock"] > div:has(.st-key-act_sec02_controls) ~ div,
.stApp.wp-ev-inner-switching .st-key-act_ev_inner_body,
.stApp.wp-t1-switching .st-key-act_t1_content_body,
.stApp.wp-venn-drill-switching .st-key-act_venn_drill_body {
opacity: 0 !important;
transform: translateY(10px) !important;
pointer-events: none !important;
transition: none !important;
animation: none !important;
}

.stApp.wp-tab-switching .st-key-wp_main_content_body [data-stale="true"],
.stApp.wp-action-switching .st-key-wp_main_content_body [data-stale="true"],
.stApp.wp-subtab-switching div[data-testid="stVerticalBlock"] > div:has(div[class*="st-key-act_subtab_mode_"]) ~ div [data-stale="true"],
.stApp.wp-subtab-switching div[data-testid="stVerticalBlock"] > div:has(div[class*="st-key-act_subtab_mode_"]) ~ div[data-stale="true"],
.stApp.wp-subtab-switching .st-key-ar_subtab_nav ~ div [data-stale="true"],
.stApp.wp-subtab-switching .st-key-ar_subtab_nav ~ div[data-stale="true"],
.stApp.wp-sec02-switching .st-key-act_sec02_content_body [data-stale="true"],
.stApp.wp-ev-inner-switching .st-key-act_ev_inner_body [data-stale="true"],
.stApp.wp-t1-switching .st-key-act_t1_content_body [data-stale="true"],
.stApp.wp-venn-drill-switching .st-key-act_venn_drill_body [data-stale="true"] {
visibility: hidden !important;
opacity: 0 !important;
}

/* グラフセクション（ev-chart）は白飛びさせず、その場で滑らかにクロスフェード＆Plotlyアニメーション遷移させる */
.st-key-act_ev_chart_body {
opacity: 1;
transform: none !important;
transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.stApp.wp-ev-chart-switching .st-key-act_ev_chart_body {
opacity: 0.76 !important;
transform: none !important;
pointer-events: none !important;
transition: opacity 0.14s ease !important;
animation: none !important;
}
.stApp.wp-ev-chart-switching .st-key-act_ev_chart_body [data-stale="true"] {
visibility: visible !important;
opacity: 1 !important;
transition: opacity 0.15s ease !important;
}
.stApp.wp-reveal-ev-chart .st-key-act_ev_chart_body {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* グラフの縦軸（お店の実績）クライアントサイド即時切替バー＆連動3指標サマリーチップ */
@keyframes wpChartMetricMorph {
0% {
opacity: 0.32;
transform: translateY(4px) scale(0.985);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.wp-origin-chart-scope {
background: transparent;
border: none;
border-top: 1px solid #E7E5E4;
border-bottom: 1px solid #E7E5E4;
border-radius: 0;
padding: 8px 0;
margin: 4px 0 8px 0;
}
.wp-origin-chart-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.wp-chart-y-ctrl-wrap {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.wp-chart-y-ctrl-label {
font-size: 11.5px;
font-weight: 800;
color: #1C1917;
white-space: nowrap;
}
.wp-chart-y-pill-group {
display: inline-flex;
align-items: center;
background: transparent;
padding: 0;
border-radius: 0;
border: 1px solid #D6D3CD;
gap: 0;
}
.wp-chart-y-pill {
appearance: none;
border: none;
border-right: 1px solid #D6D3CD;
background: #FFFFFF;
color: #57534E;
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
border-radius: 0;
cursor: pointer;
line-height: 1.3;
transition: background-color 0.16s ease, color 0.16s ease;
white-space: nowrap;
}
.wp-chart-y-pill:last-child {
border-right: none;
}
.wp-chart-y-pill:hover:not(.is-active) {
background: #F5F5F4;
color: #1C1917;
}
.wp-chart-y-pill.is-active {
background: #1C1917;
color: #FFFFFF;
font-weight: 800;
box-shadow: none;
}
.wp-chart-linked-strip {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: flex-end;
}
.wp-chart-linked-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: #FAF9F6;
border: 1px solid #E4E2DD;
border-radius: 0;
padding: 4px 9px;
font-size: 11.5px;
color: #44403C;
line-height: 1.35;
box-shadow: none;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.wp-chart-linked-chip .chip-tag {
font-size: 10px;
font-weight: 800;
color: #57534E;
background: transparent;
padding: 0 4px 0 0;
border-right: 1px solid #D6D3CD;
border-radius: 0;
white-space: nowrap;
}
.wp-chart-linked-chip .chip-val {
font-weight: 800;
color: #1C1917;
font-variant-numeric: tabular-nums;
}
.wp-chart-linked-chip.is-morphing,
.wp-chart-hdr-dynamic.is-morphing {
animation: wpChartMetricMorph 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wp-chart-linked-chip.is-morphing {
border-color: #A8A29E;
background: #FEFCE8;
}
.wp-origin-chart-guide-row {
margin-top: 6px;
padding-top: 5px;
border-top: 1px dashed #E7E5E4;
font-size: 11px;
color: #57534E;
line-height: 1.4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.wp-origin-chart-scope {
padding: 6px 0 !important;
margin: 2px 0 6px 0 !important;
}
.wp-origin-chart-top-row {
gap: 6px !important;
}
.wp-chart-y-pill {
padding: 4px 9px !important;
font-size: 11px !important;
}
.wp-chart-linked-strip {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 4px !important;
width: 100% !important;
}
.wp-chart-linked-chip {
padding: 3px 5px !important;
font-size: 10.5px !important;
justify-content: space-between !important;
}
.wp-origin-chart-guide-row {
display: none !important;
}
}

/* ② ロード完了後の一括フロートイン：すべての要素・グラフが揃った状態でふっと浮かび上がる */
.stApp.wp-reveal-tab .st-key-wp_main_content_body,
.stApp.wp-reveal-action .st-key-wp_main_content_body,
.stApp.wp-reveal-subtab div[data-testid="stVerticalBlock"] > div:has(div[class*="st-key-act_subtab_mode_"]) ~ div,
.stApp.wp-reveal-subtab div[class*="st-key-act_subtab_mode_"] ~ div,
.stApp.wp-reveal-sec02 .st-key-act_sec02_content_body,
.stApp.wp-reveal-sec02 div[data-testid="stVerticalBlock"] > div:has(.st-key-act_sec02_controls) ~ div,
.stApp.wp-reveal-ev-inner .st-key-act_ev_inner_body,
.stApp.wp-reveal-t1 .st-key-act_t1_content_body,
.stApp.wp-reveal-venn-drill .st-key-act_venn_drill_body,
.wp-smooth-reveal-anim {
animation: wpSmoothFloatIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* クライアントサイドタブ・ポップアップモーダルも開いた瞬間にふっと浮かび上がる */
[data-yf-panel]:not([style*="display: none"]),
[data-baseweb="tab-panel"],
div[data-testid="stDialog"] [role="dialog"] {
animation: wpSmoothFloatIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-testid="stDateInput"],
[data-testid="stDateInput"] *,
[data-testid="stDateInputCalendar"],
[data-testid="stDateInputCalendar"] *,
#stFloatingOverlayPortal,
#stFloatingOverlayPortal * {
pointer-events: auto !important;
}

body:not(:has([data-testid="stDateInputCalendar"])) .stApp:has([data-testid="stStatusWidget"]) button,
body:not(:has([data-testid="stDateInputCalendar"])) .stApp:has([data-testid="stStatusWidget"]) input,
body:not(:has([data-testid="stDateInputCalendar"])) .stApp:has([data-testid="stStatusWidget"]) select,
body:not(:has([data-testid="stDateInputCalendar"])) .stApp:has([data-testid="stStatusWidget"]) [role="radiogroup"],
body:not(:has([data-testid="stDateInputCalendar"])) .stApp:has([data-testid="stStatusWidget"]) [data-testid="stSegmentedControl"],
body:not(:has([data-testid="stDateInputCalendar"])) .stApp:has([data-testid="stStatusWidget"]) [data-testid="stPills"] {
pointer-events: none !important;
user-select: none !important;
}

@keyframes wp-top-progress-indeterminate {
0% { transform: translateX(-100%) scaleX(0.35); }
50% { transform: translateX(0%) scaleX(0.65); }
100% { transform: translateX(100%) scaleX(0.35); }
}

#wp-top-progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 2000005;
pointer-events: none;
overflow: hidden;
background: rgba(158, 42, 59, 0.14);
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
}
#wp-top-progress-bar::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #1C1917 0%, #9E2A3B 55%, #D97706 100%);
transform-origin: left center;
animation: wp-top-progress-indeterminate 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body:not(:has([data-testid="stDateInputCalendar"])):has(.stApp.wp-is-reloading) #wp-top-progress-bar,
body:not(:has([data-testid="stDateInputCalendar"])):has(.stApp [data-testid="stStatusWidget"]) #wp-top-progress-bar {
opacity: 1 !important;
visibility: visible !important;
}

/* ロード中であることが一目でわかるスマート・ローダーオーバーレイ */
#wp-smart-loader-overlay {
position: fixed;
left: 50%;
top: 54%;
transform: translate(-50%, -44%) scale(0.97);
z-index: 2000004;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.14s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.14s ease;
}
#wp-smart-loader-overlay.wp-loader-visible {
opacity: 1 !important;
visibility: visible !important;
transform: translate(-50%, -50%) scale(1) !important;
}
.wp-smart-loader-card {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #D6D3CD;
border-top: 2.5px solid #1C1917;
box-shadow: 0 12px 28px -8px rgba(28, 25, 23, 0.16), 0 4px 10px -3px rgba(28, 25, 23, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.wp-smart-loader-spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2.2px solid #E5E2DC;
border-top-color: #9E2A3B;
border-right-color: #1C1917;
animation: wpLoaderSpin 0.68s linear infinite;
flex-shrink: 0;
}
.wp-smart-loader-text {
font-size: 12px;
font-weight: 800;
color: #1C1917;
letter-spacing: 0.04em;
white-space: nowrap;
}

.wp-global-loader-wrap {
display: none !important;
}

.busy-lock-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(255, 255, 255, 0.22);
cursor: default;
pointer-events: all;
}

/* =========================================================
③ ソリッド＆シャープなボタン・入力コントロール設計（AI特有のグラデーション・丸角・色付き影を完全排除）
========================================================= */
.stButton > button,
.stButton > button p,
.stButton > button span,
div[data-testid="stSegmentedControl"] button,
div[data-testid="stSegmentedControl"] span,
div[data-testid="stPills"] button,
div[data-testid="stPills"] span,
div[role="radiogroup"] label,
div[data-testid="stWidgetLabel"] p {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}

.stButton > button {
min-height: 34px !important;
padding: 4px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #18181B !important;
background-color: #FFFFFF !important;
border: 1px solid #D4D4D8 !important;
border-radius: 0px !important;
box-shadow: none !important;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
.stButton > button:hover {
background-color: #F4F4F5 !important;
border-color: #18181B !important;
color: #18181B !important;
box-shadow: none !important;
}
.stButton > button[kind="primary"] {
background: #0284C7 !important;
background-color: #0284C7 !important;
color: #FFFFFF !important;
border: 1px solid #0284C7 !important;
border-radius: 0px !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.stButton > button[kind="primary"]:hover {
background: #0369A1 !important;
background-color: #0369A1 !important;
border-color: #0369A1 !important;
box-shadow: none !important;
}
.stButton > button[kind="primary"] p,
.stButton > button[kind="primary"] span {
color: #FFFFFF !important;
font-weight: 600 !important;
}

/* 入力ボックス・セレクトボックス（シャープなエッジ・影なし・1pxソリッド罫線） */
div[data-testid="stTextInput"] [data-baseweb="input"],
div[data-testid="stTextInput"] [data-baseweb="base-input"],
div[data-testid="stNumberInput"] [data-baseweb="input"],
div[data-testid="stNumberInput"] [data-baseweb="base-input"],
div[data-baseweb="input"] > div {
border-radius: 0px !important;
border: 1px solid #CBD5E1 !important;
background-color: #FFFFFF !important;
background: #FFFFFF !important;
box-shadow: none !important;
color: #0F172A !important;
transition: border-color 0.14s ease, background-color 0.14s ease !important;
}
/* 全画面共通：st.date_input カレンダーコントロール統一スタイル（カスタム日付バー .em-date-bar と同一仕様） */
div[data-testid="stDateInput"] [data-baseweb="input"],
div[data-testid="stDateInput"] [data-baseweb="base-input"] {
min-height: 42px !important;
height: 42px !important;
border-radius: 10px !important;
border: 1px solid #D4D4D8 !important;
background-color: #FFFFFF !important;
background: #FFFFFF !important;
padding: 0 10px 0 12px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
color: #18181B !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease !important;
}
div[data-testid="stDateInput"] [data-baseweb="input"]:hover,
div[data-testid="stDateInput"] [data-baseweb="base-input"]:hover {
border-color: #71717A !important;
background-color: #FFFFFF !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
div[data-testid="stDateInput"] [data-baseweb="input"]:focus-within,
div[data-testid="stDateInput"] [data-baseweb="base-input"]:focus-within {
border-color: #18181B !important;
background-color: #FFFFFF !important;
box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08) !important;
}
div[data-testid="stDateInput"] [data-baseweb="input"] > div,
div[data-testid="stDateInput"] [data-baseweb="base-input"] > div {
background-color: transparent !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
}
div[data-testid="stDateInput"] [data-baseweb="input"] > div::before,
div[data-testid="stDateInput"] [data-baseweb="base-input"] > div::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 8px;
flex-shrink: 0;
background-color: #18181B;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
div[data-testid="stDateInput"] input {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.01em !important;
color: #18181B !important;
padding: 0 !important;
cursor: pointer !important;
}
div[data-testid="stDateInputCalendar"],
div[data-baseweb="calendar"] {
border-radius: 12px !important;
border: 1px solid #D4D4D8 !important;
background: #FFFFFF !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
}
div[data-testid="stSelectbox"] [data-baseweb="select"] > div,
div[data-baseweb="select"] > div {
border-radius: 0px !important;
border: 1px solid #CBD5E1 !important;
background-color: #FFFFFF !important;
background: #FFFFFF !important;
box-shadow: none !important;
color: #0F172A !important;
font-weight: 600 !important;
min-height: 40px !important;
cursor: pointer !important;
transition: border-color 0.12s ease !important;
}
div[data-testid="stSelectbox"] [data-baseweb="select"] > div > div {
background-color: transparent !important;
background: transparent !important;
color: #0F172A !important;
font-weight: 600 !important;
}
div[data-testid="stSelectbox"] [data-baseweb="select"] svg {
fill: #3F3F46 !important;
color: #3F3F46 !important;
width: 18px !important;
height: 18px !important;
}
div[data-testid="stSelectbox"] [data-baseweb="select"] > div:hover {
border-color: #0284C7 !important;
background-color: #F8FAFC !important;
box-shadow: none !important;
}

/* 分析室の店舗選択プルダウン（他タブと統一したフラット1px罫線スタイル・見切れ防止の自動高さ＆折り返し対応） */
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] div:has(> button[aria-label="Open"]),
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div {
min-height: 42px !important;
height: auto !important;
border: 1px solid #D4D4D8 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: none !important;
padding: 6px 8px 6px 12px !important;
display: flex !important;
align-items: center !important;
transition: border-color 0.15s ease, background-color 0.15s ease !important;
cursor: pointer !important;
}
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] div:has(> button[aria-label="Open"]):hover,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div:hover {
background: #FAF9F6 !important;
border-color: #1C1917 !important;
}
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] input,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:first-of-type,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:first-of-type > div,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:first-of-type span {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1C1917 !important;
line-height: 1.35 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
word-break: break-word !important;
height: auto !important;
max-height: none !important;
cursor: pointer !important;
}
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] button[aria-label="Open"],
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:last-child {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
flex-shrink: 0 !important;
width: auto !important;
padding: 0 2px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] button[aria-label="Open"]::before,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:last-child::before {
content: "店舗切替";
font-size: 10.5px;
font-weight: 700;
color: #57534E;
background: #F4F4F5;
border: 1px solid #E4E4E7;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
line-height: 1.2;
}
@media (max-width: 768px) {
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div {
padding: 6px 8px 6px 10px !important;
}
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:first-of-type,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:first-of-type > div,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:first-of-type span {
font-size: 12.5px !important;
line-height: 1.3 !important;
}
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] button[aria-label="Open"]::before,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] > div > div:last-child::before {
display: none !important;
}
}
.ar-store-meta-sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
font-size: 11.5px;
font-weight: 500;
color: #71717A;
line-height: 1.4;
margin: -4px 0 6px 2px;
}
.ar-store-meta-sub span {
display: inline-flex;
align-items: center;
gap: 4px;
}
div[class*="st-key-act_compact_store_select"] div[data-testid="stSelectbox"] button[aria-label="Open"] svg,
div[class*="st-key-act_compact_store_select"] [data-baseweb="select"] svg {
fill: #3F3F46 !important;
color: #3F3F46 !important;
background-color: transparent !important;
border-radius: 0px !important;
padding: 0px !important;
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
}
div[class*="st-key-paid_top_store_select"] [data-baseweb="select"] > div,
div[class*="st-key-t2_hotel_sel_"] [data-baseweb="select"] > div,
div[class*="st-key-t2_hotel_dd_"] [data-baseweb="select"] > div,
div[class*="st-key-venn_day_drill_sel_"] [data-baseweb="select"] > div {
min-height: 42px !important;
height: auto !important;
border: 1px solid #D4D4D8 !important;
border-radius: 10px !important;
background-color: #FFFFFF !important;
background: #FFFFFF !important;
padding: 5px 12px !important;
}
div[class*="st-key-paid_top_store_select"] [data-baseweb="select"] > div:hover,
div[class*="st-key-t2_hotel_sel_"] [data-baseweb="select"] > div:hover,
div[class*="st-key-t2_hotel_dd_"] [data-baseweb="select"] > div:hover,
div[class*="st-key-venn_day_drill_sel_"] [data-baseweb="select"] > div:hover {
background-color: #FAF9F6 !important;
background: #FAF9F6 !important;
border-color: #1C1917 !important;
}
div[class*="st-key-paid_top_store_select"] [data-baseweb="select"] > div > div,
div[class*="st-key-t2_hotel_sel_"] [data-baseweb="select"] > div > div,
div[class*="st-key-t2_hotel_dd_"] [data-baseweb="select"] > div > div,
div[class*="st-key-venn_day_drill_sel_"] [data-baseweb="select"] > div > div {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1C1917 !important;
line-height: 1.35 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
div[class*="st-key-paid_top_store_select"] [data-baseweb="select"] svg,
div[class*="st-key-t2_hotel_sel_"] [data-baseweb="select"] svg,
div[class*="st-key-t2_hotel_dd_"] [data-baseweb="select"] svg,
div[class*="st-key-venn_day_drill_sel_"] [data-baseweb="select"] svg {
fill: #3F3F46 !important;
color: #3F3F46 !important;
width: 18px !important;
height: 18px !important;
}
div[data-testid="stSelectbox"] [data-baseweb="select"] input,
div[data-baseweb="select"] input {
font-size: 16px !important;
}

/* プルダウン展開時（ドロップダウンメニュー）の視認性・タップ性強化 */
div[data-baseweb="popover"] {
z-index: 1000010 !important;
}
div[data-baseweb="popover"] ul[role="listbox"],
div[data-baseweb="popover"] [data-baseweb="menu"] {
background-color: #FFFFFF !important;
border: 1.5px solid #0284C7 !important;
border-radius: 0px !important;
box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.22) !important;
padding: 4px 0 !important;
}
div[data-baseweb="popover"] li[role="option"] {
font-size: 14px !important;
font-weight: 700 !important;
color: #0F172A !important;
padding: 11px 14px !important;
min-height: 44px !important;
line-height: 1.4 !important;
white-space: normal !important;
word-break: break-word !important;
border-bottom: 1px solid #E2E8F0 !important;
transition: background-color 0.12s ease !important;
}
div[data-baseweb="popover"] li[role="option"]:last-child {
border-bottom: none !important;
}
div[data-baseweb="popover"] li[role="option"]:hover {
background-color: #F0F9FF !important;
color: #0369A1 !important;
}
div[data-baseweb="popover"] li[role="option"][aria-selected="true"] {
background-color: #E0F2FE !important;
color: #0369A1 !important;
font-weight: 800 !important;
border-left: 4px solid #0284C7 !important;
padding-left: 10px !important;
}
/* 12エリア×日付マトリクスのクリック可能セルボタン */
div[class*="st-key-mcell_"] .stButton > button,
div[class*="st-key-mcell_"] button[data-testid*="stBaseButton"] {
min-height: 46px !important;
height: 46px !important;
padding: 0 6px !important;
border-radius: 0px !important;
font-size: 13px !important;
font-weight: 700 !important;
font-family: 'JetBrains Mono', 'Inter', 'Noto Sans JP', sans-serif !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: 0.02em !important;
width: 100% !important;
margin: 0 !important;
box-shadow: none !important;
transition: background-color 0.1s ease, border-color 0.1s ease !important;
}
div[class*="st-key-mcell_"] .stButton > button p,
div[class*="st-key-mcell_"] .stButton > button span,
div[class*="st-key-mcell_"] .stButton > button div {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 700 !important;
font-family: 'JetBrains Mono', 'Inter', 'Noto Sans JP', sans-serif !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: 0.02em !important;
}
div[class*="st-key-mcell_S_"] .stButton > button,
div[class*="st-key-mcell_S_"] button[data-testid*="stBaseButton"] {
background-color: #FFF1F2 !important;
color: #BE123C !important;
border: 1px solid #FECDD3 !important;
}
div[class*="st-key-mcell_S_"] .stButton > button p,
div[class*="st-key-mcell_S_"] .stButton > button span {
color: #BE123C !important;
}
div[class*="st-key-mcell_S_"] .stButton > button:hover {
background-color: #FFE4E6 !important;
border: 1px solid #FB7185 !important;
}
div[class*="st-key-mcell_A_"] .stButton > button,
div[class*="st-key-mcell_A_"] button[data-testid*="stBaseButton"] {
background-color: #FFFBEB !important;
color: #92400E !important;
border: 1px solid #FDE68A !important;
}
div[class*="st-key-mcell_A_"] .stButton > button p,
div[class*="st-key-mcell_A_"] .stButton > button span {
color: #92400E !important;
}
div[class*="st-key-mcell_A_"] .stButton > button:hover {
background-color: #FEF3C7 !important;
border: 1px solid #FCD34D !important;
}
div[class*="st-key-mcell_B_"] .stButton > button,
div[class*="st-key-mcell_B_"] button[data-testid*="stBaseButton"] {
background-color: #F1F5F9 !important;
color: #334155 !important;
border: 1px solid #E2E8F0 !important;
}
div[class*="st-key-mcell_B_"] .stButton > button p,
div[class*="st-key-mcell_B_"] .stButton > button span {
color: #334155 !important;
}
div[class*="st-key-mcell_B_"] .stButton > button:hover {
background-color: #E2E8F0 !important;
border: 1px solid #CBD5E1 !important;
}
div[class*="st-key-mcell_C_"] .stButton > button,
div[class*="st-key-mcell_C_"] button[data-testid*="stBaseButton"] {
background-color: #FFFFFF !important;
color: #4B5563 !important;
border: 1px solid #E5E7EB !important;
font-weight: 600 !important;
}
div[class*="st-key-mcell_C_"] .stButton > button p,
div[class*="st-key-mcell_C_"] .stButton > button span {
color: #4B5563 !important;
font-weight: 600 !important;
}
div[class*="st-key-mcell_C_"] .stButton > button:hover {
background-color: #F9FAFB !important;
border: 1px solid #D1D5DB !important;
}
div[data-testid="stPopover"] > div > button,
div[data-testid="stPopover"] button {
min-height: 34px !important;
padding: 4px 12px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #111827 !important;
background-color: #FFFFFF !important;
border: 1px solid #D4D4D8 !important;
border-radius: 0px !important;
box-shadow: none !important;
}
div[data-testid="stPopover"] > div > button:hover,
div[data-testid="stPopover"] button:hover {
border-color: #18181B !important;
background-color: #F4F4F5 !important;
}

/* 左メニュー内の項目 */
div[data-testid="stColumn"]:has(.wp-left-nav-marker) [data-testid="stVerticalBlock"] > div {
gap: 0.2rem !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button {
width: 100% !important;
background-color: transparent !important;
color: #374151 !important;
border: 1px solid transparent !important;
border-radius: 0px !important;
box-shadow: none !important;
font-size: 12.5px !important;
font-weight: 500 !important;
min-height: 36px !important;
padding: 5px 12px !important;
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
transition: all 0.12s ease !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button > div {
width: 100% !important;
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button p,
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button span {
color: #374151 !important;
font-size: 12.5px !important;
text-align: left !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button:hover {
background-color: #F4F4F5 !important;
border-color: transparent !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button:hover p,
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button:hover span {
color: #111827 !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button[kind="primary"] {
background: #18181B !important;
color: #FFFFFF !important;
border: 1px solid #18181B !important;
box-shadow: none !important;
font-weight: 600 !important;
}
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button[kind="primary"] p,
div[data-testid="stColumn"]:has(.wp-left-nav-marker) .stButton button[kind="primary"] span {
color: #FFFFFF !important;
font-weight: 600 !important;
}

.wp-brand-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 4px;
padding: 2px 2px 8px 6px;
}
.wp-brand-row .wp-brand {
padding: 0;
min-width: 0;
flex: 1;
}
.wp-collapse-icon-btn {
display: inline-block;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 0px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
cursor: pointer;
transition: background-color 0.14s ease;
}
.wp-collapse-icon-btn:hover {
background-color: #F4F4F5;
}

.st-key-wp_btn_expand_top .stButton button,
.st-key-wp_btn_expand_top_master .stButton button,
div[data-testid="stElementContainer"]:has(.wp-collapsed-trigger-marker) + div[data-testid="stElementContainer"] .stButton button {
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border-radius: 0px !important;
background-color: #FFFFFF !important;
border: 1px solid var(--cf-border-strong) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231D1F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m14 9 3 3-3 3'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
}

div[data-testid="stWidgetLabel"] p {
font-size: 11px !important;
font-weight: 600 !important;
color: #52525B !important;
letter-spacing: 0.01em !important;
margin-bottom: 2px !important;
}

/* =========================================================
④ メイン画面の見出し・エディトリアルKPIグリッド・データテーブル
========================================================= */
.nav-parent-banner {
padding: 8px 0 8px 0;
margin-bottom: 12px;
border-top: 2px solid #18181B;
border-bottom: 1px solid var(--cf-border);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
white-space: nowrap;
overflow: hidden;
}
.nav-parent-left {
display: flex;
align-items: baseline;
gap: 8px;
white-space: nowrap;
}
.nav-parent-tag {
font-family: 'JetBrains Mono', 'Inter', monospace;
font-size: 11px;
font-weight: 700;
color: #EA580C;
background: transparent;
border: none;
padding: 0;
border-radius: 0;
letter-spacing: 0.06em;
white-space: nowrap;
}
.nav-parent-main {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 19px;
font-weight: 800;
color: #111827;
letter-spacing: -0.02em;
white-space: nowrap;
}
.nav-parent-sub {
font-size: 12px;
font-weight: 400;
color: #71717A;
white-space: nowrap;
}

/* エリア別需要ページ・ポータル日付バー（st.components.v2 ネイティブHTML/JSコンポーネント用） */
[data-testid="stBidiComponent"],
[data-testid="stBidiComponentRegular"],
div:has(> [data-testid="stBidiComponent"]) {
overflow: visible !important;
}
.nav-parent-banner.dash-status {
border-top: none;
margin-top: 0;
padding-top: 6px;
}

.kpi-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
background: #E5E2DC;
gap: 1px;
border: none;
border-top: 1px solid #1C1917;
border-bottom: 1px solid #E5E2DC;
border-radius: 0px;
box-shadow: none;
overflow: hidden;
margin-bottom: 18px;
}
.kpi-card {
background: #FAF9F6;
padding: 14px 16px 14px 0;
overflow: hidden;
white-space: nowrap;
}
.kpi-card:not(:first-child) {
padding-left: 16px;
}
.kpi-label {
font-size: 11px;
font-weight: 600;
color: #78716C;
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-main {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 20px;
font-weight: 700;
color: #1C1917;
letter-spacing: -0.025em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-sub {
font-size: 11px;
color: #78716C;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.sec-title {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 15px;
font-weight: 800;
color: #1C1917;
letter-spacing: -0.02em;
line-height: 1.25;
padding-top: 10px;
padding-bottom: 8px;
padding-left: 0;
border-left: none;
margin: 22px 0 12px 0;
border-top: 1px solid #1C1917;
border-bottom: 1px solid #E5E2DC;
display: flex;
align-items: baseline;
justify-content: space-between;
white-space: nowrap;
overflow: hidden;
}

/* フラットタグ（彩度を落としたチャコール・ストーン・バーガンディ） */
.tag-today {
display: inline-block;
background: #1C1917;
color: #FAF9F6;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 0px;
margin-left: 6px;
vertical-align: 1px;
white-space: nowrap;
}
.tag-target {
display: inline-block;
background: #F3F1EC;
color: #44403C;
border: 1px solid #D6D3CD;
font-size: 10.5px;
font-weight: 600;
padding: 1px 6px;
border-radius: 0px;
margin-left: 4px;
vertical-align: 1px;
white-space: nowrap;
}
.tag-holiday {
display: inline-block;
color: #9E2A3B;
font-size: 10px;
font-weight: 600;
margin-left: 5px;
vertical-align: 1px;
white-space: nowrap;
}

.badge-so {
display: inline-flex;
align-items: center;
color: #9E2A3B;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.badge-busy {
display: inline-flex;
align-items: center;
color: #B4532A;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.badge-norm {
display: inline-flex;
align-items: center;
color: #3B6251;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.badge-calm {
display: inline-flex;
align-items: center;
color: #78716C;
font-size: 11px;
font-weight: 400;
white-space: nowrap;
}

/* エディトリアル・データテーブル（外周の角丸ボックスを全廃し、上下実線＋水平細線のみで構成） */
.price-table-wrap {
max-height: 440px;
overflow-y: auto;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
border: none !important;
border-top: 1px solid #1C1917 !important;
border-bottom: 1px solid #D6D3CD !important;
border-radius: 0px !important;
background: #FAF9F6;
box-shadow: none !important;
width: 100%;
box-sizing: border-box;
}
.price-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
font-size: 12px;
}
.price-table thead th {
position: sticky;
top: 0;
z-index: 10;
background: #F3F1EC;
color: #1C1917;
font-weight: 700;
font-size: 11px;
padding: 9px 8px;
border-bottom: 1px solid #D6D3CD;
text-align: center;
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
line-height: 1.35;
}
.price-table tbody td {
padding: 8px 8px;
border-bottom: 1px solid #E5E2DC;
text-align: center;
vertical-align: middle;
line-height: 1.45;
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
}
.price-table tbody tr:last-child td {
border-bottom: none;
}
.price-table tbody tr:hover {
background-color: #F3F1EC !important;
}
.row-weekend {
background-color: #F6F4EF;
}
.cell-price {
font-family: 'JetBrains Mono', 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
color: #1C1917;
white-space: nowrap;
}
.cell-so {
font-weight: 600;
font-size: 11px;
color: #BE123C;
white-space: nowrap;
}
.cell-diff-up {
font-size: 10px;
font-weight: 600;
color: #BE123C;
white-space: nowrap;
}
.cell-diff-down {
font-size: 10px;
font-weight: 600;
color: #0051C3;
white-space: nowrap;
}
.cell-diff-flat {
font-size: 10px;
color: #71717A;
white-space: nowrap;
}

.ai-dialog-report {
background: #FFFFFF;
border: none;
border-top: 1.5px solid #18181B;
border-bottom: 1px solid #E4E4E7;
border-radius: 0px;
box-shadow: none;
padding: 18px 4px;
font-size: 13.5px;
line-height: 1.8;
color: #111827;
margin-top: 10px;
}
.ai-badge {
display: inline-flex;
align-items: center;
background: #F4F4F5;
color: #3F3F46;
border: 1px solid #E4E4E7;
font-size: 10.5px;
font-weight: 700;
padding: 1px 7px;
border-radius: 0px;
white-space: nowrap;
}

div[data-testid="stVerticalBlock"] > div {
gap: 0.35rem !important;
}

/* =========================================================
⑤ 事業所マスタ ＆ ホテルマスタ
========================================================= */
.mst-native-table tbody tr,
.mst-hotel-table tbody tr {
cursor: pointer;
transition: background-color 0.12s ease;
}
.mst-native-table tbody tr:hover td,
.mst-hotel-table tbody tr:hover td {
background-color: #FAFAFA !important;
}
.mst-native-table tbody tr.mst-tr-selected td,
.mst-hotel-table tbody tr.mst-tr-selected td {
background-color: #FFF7ED !important;
}
.mst-native-table tbody tr.mst-tr-selected:hover td,
.mst-hotel-table tbody tr.mst-tr-selected:hover td {
background-color: #FFEDD5 !important;
}

.mst-hotel-table tbody tr.mst-htr-linked td {
background-color: rgba(16, 185, 129, 0.05) !important;
}
.mst-hotel-table tbody tr.mst-htr-linked:hover td {
background-color: rgba(16, 185, 129, 0.10) !important;
}

.ios-del-icon-btn {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 0px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
cursor: pointer;
transition: background-color 0.14s ease, transform 0.1s ease;
}
.ios-del-icon-btn:hover {
background-color: #FFF1F2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23E11D48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}
.ios-del-icon-btn.is-disabled {
opacity: 0.30;
cursor: not-allowed;
pointer-events: none;
}

div[data-testid="stDialog"]:has(.wp-hotel-picker-modal-marker) div[role="dialog"] {
width: min(96vw, 1280px) !important;
max-width: 1280px !important;
border-radius: 0px !important;
}

.mdl-add-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 0px;
font-size: 11px;
font-weight: 600;
background-color: #18181B;
color: #FFFFFF;
border: 1px solid #18181B;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: background-color 0.12s ease;
}
.mdl-add-btn:hover {
background-color: #27272A;
border-color: #27272A;
}

.mdl-picked-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 0px;
font-size: 10.5px;
font-weight: 600;
background-color: #F4F4F5;
color: #3F3F46;
border: 1px solid #E4E4E7;
white-space: nowrap;
}

div[data-testid="stButtonGroup"],
div[data-testid="stButtonGroup"] .react-aria-ToggleButtonGroup,
div[data-testid="stButtonGroup"] [role="radiogroup"],
div[data-testid="stSegmentedControl"],
div[data-testid="stSegmentedControl"] div,
div[data-testid="stSegmentedControl"] [data-baseweb="button-group"],
div[data-testid="stPills"],
div[data-testid="stPills"] div,
div[data-testid="stPills"] [data-baseweb="button-group"] {
flex-wrap: wrap !important;
overflow: visible !important;
overflow-x: visible !important;
mask-image: none !important;
-webkit-mask-image: none !important;
row-gap: 4px !important;
column-gap: 4px !important;
}
div[data-testid="stButtonGroup"] button[data-variant="segmented_control"],
div[data-testid="stButtonGroup"] button,
div[data-testid="stSegmentedControl"] button,
div[data-testid="stPills"] button {
border-radius: 0px !important;
padding: 3px 10px !important;
font-size: 12px !important;
font-weight: 700 !important;
min-height: 32px !important;
height: 32px !important;
white-space: nowrap !important;
flex: 0 1 auto !important;
}

/* =========================================================
⑥ ポータルTOP 12エリア エディトリアル・スイスグリッド（4辺囲み箱を廃止し、上部1pxボーダーと余白で構成）
========================================================= */
.portal-area-card {
background: #FAF9F6;
border: none;
border-top: 1.5px solid #1C1917;
border-bottom: 1px solid #E5E2DC;
border-radius: 0px !important;
margin-bottom: 14px;
box-shadow: none !important;
transition: background-color 0.14s ease;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.portal-area-card:hover {
background: #F3F1EC;
box-shadow: none !important;
transform: none;
}
.portal-area-card.is-map-focused {
background: #F3F1EC !important;
border-top: 2px solid #B4532A !important;
}
/* 右カラム：2列×6段のエリアグリッド（全高さを212pxに統一し、6段合計＝1,332pxで左の3地図合計高さと完全一致） */
.portal-area-cards-grid-2col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 212px;
column-gap: 20px;
row-gap: 12px;
margin: 0 !important;
padding: 0 !important;
}
.portal-area-cards-grid-2col .portal-area-card {
height: 212px !important;
min-height: 212px !important;
max-height: 212px !important;
margin-bottom: 0 !important;
}
@media (max-width: 960px) {
.portal-area-cards-grid-2col {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.portal-area-cards-grid-2col .portal-area-card {
height: auto !important;
max-height: none !important;
}
}
/* 左カラム：StreamlitのstMarkdownContainerデフォルト負マージン（-1rem）を完全にゼロ化し、地図ヘッダーが地図に隠れる現象を防止 */
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) [data-testid="stVerticalBlock"],
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) [data-testid="stVerticalBlock"] > div {
gap: 0px !important;
}
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) div[data-testid="stElementContainer"],
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) .stMarkdown,
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) div[data-testid="stMarkdownContainer"],
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) div[data-testid="stPlotlyChart"] {
margin: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
padding: 0px !important;
}
.wp-master-left-map-hdr {
position: relative;
z-index: 6;
background: #F3F1EC;
color: #1C1917;
border: none;
border-top: 1.5px solid #1C1917;
border-bottom: 1px solid #D6D3CD;
height: 34px;
padding: 0 10px;
border-radius: 0 !important;
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 11.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
box-sizing: border-box;
}
div[data-testid="stColumn"]:has(.wp-master-left-map-hdr) div[data-testid="stPlotlyChart"] {
border: 1px solid #D6D3CD;
border-top: none;
border-radius: 0 !important;
overflow: hidden;
box-sizing: border-box;
background: #FAF9F6;
box-shadow: none;
}
.portal-area-card-head {
padding: 8px 4px 7px 4px;
background: transparent;
border-bottom: 1px solid #E5E2DC;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
flex-shrink: 0;
}
/* カード内の入れ子箱を廃止し、シャープな1px水平・垂直分割線のみにする */
.portal-area-kpi-strip {
display: grid;
grid-template-columns: 1fr 1fr;
background: transparent;
border: none;
border-bottom: 1px solid #E5E2DC;
border-radius: 0;
margin-bottom: 6px;
padding-bottom: 4px;
overflow: hidden;
flex-shrink: 0;
}
.portal-area-kpi-cell {
padding: 3px 6px;
border-right: 1px solid #E5E2DC;
min-width: 0;
}
.portal-area-kpi-cell:first-child {
padding-left: 0;
}
.portal-area-kpi-cell:last-child {
border-right: none;
padding-right: 0;
}
.portal-area-kpi-lbl {
font-size: 9px;
font-weight: 600;
color: #78716C;
line-height: 1.2;
margin-bottom: 1px;
white-space: nowrap;
}
.portal-area-kpi-val {
font-family: 'JetBrains Mono', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 11px;
font-weight: 700;
color: #1C1917;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.portal-area-hotels-strip {
margin-bottom: 6px;
padding-bottom: 5px;
border-bottom: 1px solid #E5E2DC;
flex-shrink: 0;
}
.portal-area-hotels-label {
font-size: 9px;
font-weight: 600;
color: #78716C;
line-height: 1.2;
margin-bottom: 3px;
letter-spacing: 0.02em;
}
.portal-area-hotels-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.portal-hotel-chip {
display: inline-flex;
align-items: center;
gap: 3.5px;
background: #F8F6F2;
border: 1px solid #E5E2DC;
padding: 1px 5px;
font-size: 9.5px;
line-height: 1.25;
color: #1C1917;
white-space: nowrap;
border-radius: 0;
}
.portal-hotel-chip.is-soldout {
background: #FFF1F2;
border-color: #FECDD3;
color: #BE123C;
}
.portal-hotel-chip-name {
font-weight: 600;
}
.portal-hotel-chip-price {
font-family: 'JetBrains Mono', 'Inter', monospace;
font-size: 9px;
color: #57534E;
font-weight: 600;
}
.portal-hotel-chip-badge {
font-family: 'Noto Sans JP', sans-serif;
font-size: 8.5px;
color: #BE123C;
font-weight: 700;
}
.portal-area-card-map {
position: relative;
width: 100%;
aspect-ratio: 360 / 132;
min-height: 124px;
overflow: hidden;
background: #DCE7F0;
border-bottom: 1px solid #E4E4E7;
}
.portal-area-card-map img.portal-map-tile {
position: absolute !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
pointer-events: none !important;
user-select: none !important;
display: block !important;
z-index: 1;
}
.portal-area-map-pill-top {
position: absolute;
top: 6px;
left: 6px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #D4D4D8;
border-radius: 0px !important;
color: #111827;
font-size: 10px;
font-weight: 600;
padding: 1px 7px;
line-height: 1.35;
box-shadow: none;
pointer-events: none;
z-index: 7;
}
.portal-area-map-pill-bottom {
position: absolute;
bottom: 5px;
right: 6px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #D4D4D8;
border-radius: 0px !important;
color: #27272A;
font-size: 9px;
font-weight: 600;
padding: 1px 7px;
line-height: 1.3;
display: flex;
align-items: center;
gap: 5px;
pointer-events: none;
z-index: 7;
}
.portal-area-card-body {
padding: 6px 12px 7px 12px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.portal-area-card-summary {
font-size: 11px;
color: #3F3F46;
line-height: 1.54;
padding: 3px 0;
margin-bottom: 5px;
flex: 1;
display: block;
overflow: visible;
box-sizing: border-box;
}
.portal-area-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 5px;
margin-top: auto;
border-top: 1px solid #F4F4F5;
font-size: 10px;
gap: 6px;
flex-shrink: 0;
}
.portal-area-jump-pill {
display: inline-flex;
align-items: center;
gap: 2px;
background: transparent;
color: #111827 !important;
border: none;
border-bottom: 1px solid #111827;
font-size: 10.5px;
font-weight: 700;
padding: 0 0 1px 0;
border-radius: 0px !important;
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease;
letter-spacing: 0.01em;
flex-shrink: 0;
}
.portal-area-jump-pill:hover {
background: transparent;
color: #EA580C !important;
border-bottom-color: #EA580C;
}

/* 本日の外食需要ランキング（外周の角丸枠を排した新聞・株価ティッカーストリップ） */
@keyframes wpRankMarquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
.wp-rank-ticker-bar {
display: flex;
align-items: center;
background: transparent;
border: none;
border-top: 1px solid #E4E4E7;
border-bottom: 1px solid #E4E4E7;
border-radius: 0px !important;
padding: 6px 0;
margin-bottom: 10px;
box-shadow: none;
overflow: hidden;
gap: 10px;
}
.wp-rank-ticker-title {
display: inline-flex;
align-items: center;
gap: 6px;
background: #18181B;
color: #FFFFFF;
border: none;
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 10.5px;
font-weight: 700;
padding: 3px 9px;
border-radius: 0px !important;
white-space: nowrap;
flex-shrink: 0;
z-index: 2;
}
.wp-rank-ticker-viewport {
flex: 1;
min-width: 0;
overflow: hidden;
position: relative;
mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}
.wp-rank-ticker-track {
display: inline-flex;
align-items: center;
gap: 0px;
white-space: nowrap;
width: max-content;
animation: wpRankMarquee 36s linear infinite;
will-change: transform;
}
.wp-rank-ticker-viewport:hover .wp-rank-ticker-track,
.wp-rank-ticker-viewport:active .wp-rank-ticker-track {
animation-play-state: paused;
}
.wp-map-area-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 12px;
background: transparent;
border: none;
border-right: 1px solid #E4E4E7;
border-radius: 0px !important;
font-size: 11px;
font-weight: 600;
color: #111827;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
user-select: none;
flex-shrink: 0;
}
.wp-map-area-chip:hover,
.wp-map-area-chip.is-active {
background: #F4F4F5 !important;
color: #111827 !important;
}

/* 読み物セクション（沖縄外食トピックス ／ 今後の沖縄催事・海外連休・Payday）エディトリアル記事ブロック */
.portal-reading-card {
background: transparent;
border: none;
border-top: 1.5px solid #18181B;
border-bottom: 1px solid #E4E4E7;
border-radius: 0px !important;
padding: 12px 0 10px 0;
margin-bottom: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: none;
transition: border-color 0.14s ease;
}
.portal-reading-card:hover {
border-top-color: #EA580C;
box-shadow: none;
}
.portal-reading-summary-clamp {
font-size: 11.5px;
color: #334155;
line-height: 1.6;
display: block;
overflow: visible;
}
.portal-article-headline-link {
font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
font-size: 14px;
font-weight: 700;
color: #111827 !important;
text-decoration: none !important;
line-height: 1.45;
cursor: pointer;
border-bottom: 1px solid transparent;
transition: color 0.12s ease, border-color 0.12s ease;
display: inline;
}
.portal-article-headline-link:hover {
color: #EA580C !important;
border-bottom: 1px solid #EA580C;
}
.portal-report-detail-btn {
display: inline-flex;
align-items: center;
gap: 3px;
background: transparent;
color: #111827 !important;
border: none;
border-bottom: 1px solid #111827;
font-size: 11px;
font-weight: 700;
padding: 0 0 1px 0;
border-radius: 0px !important;
cursor: pointer;
text-decoration: none !important;
transition: color 0.12s ease, border-color 0.12s ease;
white-space: nowrap;
flex-shrink: 0;
}
.portal-report-detail-btn:hover {
background: transparent;
color: #EA580C !important;
border-bottom-color: #EA580C;
}

/* ニュース一覧 行スタイル */
.portal-news-row {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 12px 4px;
background: transparent;
border-bottom: 1px solid #E4E4E7;
transition: background-color 0.12s ease;
}
.portal-news-row:hover {
background-color: #FAFAFA !important;
}

/* ニュース一覧行に組み込むインライン映像ニュース要素 */
.yf-inline-vid-badge {
display: inline-flex;
align-items: center;
gap: 2px;
background: #F4F4F5;
color: #3F3F46;
border: 1px solid #E4E4E7;
font-size: 10px;
font-weight: 800;
padding: 1px 6px;
border-radius: 3px;
margin-right: 6px;
vertical-align: 1px;
cursor: pointer;
line-height: 1.3;
}
.yf-inline-vid-action {
color: #18181B;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 2px;
}
.yf-inline-vid-action:hover {
text-decoration: underline;
}
.yf-vid-news-grid-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
grid-template-areas:
"title  player"
"ai     player"
"meta   player";
column-gap: 18px;
row-gap: 4px;
align-items: center;
padding: 2px 0;
}
.yf-vid-cell-title {
grid-area: title;
line-height: 1.45;
min-width: 0;
}
.yf-news-ai-comment,
.yf-vid-cell-ai {
grid-area: ai;
font-size: 11.8px;
color: #334155;
line-height: 1.58;
background: transparent;
border: none;
border-top: 1px dashed #E2E8F0;
border-radius: 0;
padding: 5px 0 3px 0;
margin: 2px 0;
min-width: 0;
}
.yf-vid-cell-meta {
grid-area: meta;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
font-size: 10.5px;
color: #64748B;
min-width: 0;
}
.yf-vid-cell-player {
grid-area: player;
width: 320px;
aspect-ratio: 16 / 9;
position: relative;
background: #0F172A;
border-radius: 2px;
overflow: hidden;
border: 1px solid #CBD5E1;
flex-shrink: 0;
}
.yf-vid-cell-player iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 768px) {
.yf-vid-news-grid-row {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"player"
"ai"
"meta";
row-gap: 6px;
padding: 2px 0;
}
.yf-vid-cell-player {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 2px;
}
.yf-news-ai-comment,
.yf-vid-cell-ai {
font-size: 11.5px;
line-height: 1.52;
padding: 5px 0 2px 0;
}
}

/* 食材相場一覧：見出し＋テーブル列ヘッダーのスクロール追従ドック */
.yf-food-sticky-dock {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
border-bottom: 1px solid #CBD5E1;
}
.yf-food-sticky-sec-hdr {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 10px;
padding: 6px 8px 5px 8px;
border-left: 3px solid #0284C7;
background: #FFFFFF;
border-bottom: 1px solid #E2E8F0;
}
.yf-food-sticky-thead-scroll {
width: 100%;
overflow-x: hidden;
background: #F3F1EC;
}
@media (max-width: 768px) {
.yf-food-sticky-pill {
display: none !important;
}
.yf-food-sticky-sec-hdr {
padding: 5px 6px 4px 6px;
}
}

/* 分析タブ（分析室） 未ログイン時LP（アカウント登録案内 ➔ 人の言葉で訴えるエディトリアル紹介＆3要因の重なりUIショーケース V8） */
.yf-lp-stream {
max-width: 900px;
min-height: 74vh;
margin: 10px auto 32px auto;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
z-index: 2;
}
.yf-actuals-main-wrap {
min-height: 74vh;
position: relative;
z-index: 2;
padding-bottom: 24px;
}
/* 1. 冒頭セクション：アカウント作成で利用できる会員専用機能である旨の明示（活版・双柱罫フレーム） */
.yf-lp-gate-notice {
background: #FAF8F5;
color: #1C1917;
border: 1px solid #D6D3CD;
padding: 6px;
box-shadow: 0 6px 20px -8px rgba(28, 25, 23, 0.08);
}
.yf-lp-gate-notice-inner {
background: #FAF8F5;
border-top: 3px double #1C1917;
border-bottom: 3px double #1C1917;
padding: 22px 26px;
}
.yf-lp-gate-header-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid #E5E0D8;
}
.yf-lp-gate-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: #1C1917;
color: #FAF8F5;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
letter-spacing: 0.08em;
}
.yf-lp-gate-title {
font-family: 'Shippori Mincho', 'Kaisei Decol', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
font-size: 20px;
font-weight: 800;
color: #1C1917;
line-height: 1.55;
letter-spacing: 0.03em;
margin-bottom: 10px;
}
.yf-lp-gate-desc {
font-size: 13px;
color: #44403C;
line-height: 1.78;
margin-bottom: 16px;
}
.yf-lp-gate-action-bar {
background: #FFFFFF;
border: 1px solid #E5E0D8;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}
/* 2. メイン紹介シート：人が語りかけるエディトリアル見出し × ベン図UIショーケース */
.yf-lp-editorial-sheet {
background: #FFFFFF;
color: #0F172A;
border: 1px solid #CBD5E1;
border-top: 2px solid #1C1917;
padding: 30px 30px 28px 30px;
}
.yf-lp-bridge-kicker {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.yf-lp-bridge-kicker-line {
flex: 1;
height: 1px;
background: #CBD5E1;
}
.yf-lp-bridge-kicker-text {
font-size: 11.5px;
font-weight: 800;
color: #0369A1;
letter-spacing: 0.08em;
white-space: nowrap;
}
.yf-lp-editorial-catch {
font-family: 'Shippori Mincho', 'Kaisei Decol', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
font-size: 23px;
font-weight: 800;
color: #1C1917;
line-height: 1.58;
letter-spacing: 0.03em;
margin-bottom: 14px;
}
.yf-lp-editorial-catch-sub {
display: inline-block;
border-top: 1px solid #1C1917;
border-bottom: 1px solid #1C1917;
padding: 2px 10px;
font-size: 13px;
font-weight: 700;
color: #9E2A3B;
margin-bottom: 10px;
letter-spacing: 0.06em;
}
.yf-lp-editorial-story {
font-size: 13.5px;
color: #334155;
line-height: 1.85;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid #E2E8F0;
}
/* UIプレビュー・アプリケーションウィンドウ枠（左縦線を使わずブラウザ/アプリ枠で表現） */
.yf-lp-ui-window {
background: #F8FAFC;
border: 1px solid #94A3B8;
border-radius: 4px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 10px 26px -10px rgba(15, 23, 42, 0.14);
}
.yf-lp-ui-window-bar {
background: #1E293B;
color: #F8FAFC;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
}
.yf-lp-ui-window-body {
padding: 14px 16px 16px 16px;
}
.yf-lp-ui-cond-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #FFFFFF;
padding: 8px 12px;
margin-bottom: 12px;
border: 1px solid #CBD5E1;
border-top: 2px solid #0369A1;
flex-wrap: wrap;
}
.yf-lp-venn-showcase-grid {
display: grid;
grid-template-columns: 0.48fr 0.52fr;
gap: 14px;
align-items: stretch;
}
.yf-lp-venn-rank-card {
background: #FFFFFF;
border: 1px solid #CBD5E1;
padding: 10px 12px;
margin-bottom: 8px;
}
.yf-lp-venn-rank-card:last-child {
margin-bottom: 0;
}
.yf-lp-rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Inter', 'Noto Sans JP', sans-serif;
font-size: 10.5px;
font-weight: 800;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.yf-lp-evidence-drawer {
margin-top: 12px;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-top: 2px solid #1E293B;
padding: 10px 14px;
}
/* 3つの機能紹介（エディトリアル3章構成・左縦線なし） */
.yf-lp-chapter-list {
display: flex;
flex-direction: column;
}
.yf-lp-chapter-item {
padding: 22px 0;
border-top: 1px solid #CBD5E1;
}
.yf-lp-chapter-item:first-child {
border-top: 2px solid #1C1917;
}
.yf-lp-chapter-item:last-child {
padding-bottom: 4px;
}
.yf-lp-chapter-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.yf-lp-chapter-num {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
font-size: 11.5px;
font-weight: 800;
color: #FFFFFF;
background: #1C1917;
padding: 2px 8px;
border-radius: 2px;
margin-right: 10px;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}
.yf-lp-chapter-title {
font-family: 'Shippori Mincho', 'Kaisei Decol', serif;
font-size: 17.5px;
font-weight: 800;
color: #1C1917;
letter-spacing: 0.02em;
}
.yf-lp-visual-canvas {
background: #FAF8F5;
border: 1px solid #E5E0D8;
padding: 14px 16px;
margin-top: 10px;
}
.yf-lp-cond-row {
display: grid;
grid-template-columns: 148px 1fr 150px;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px dashed #E5E0D8;
}
.yf-lp-cond-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* CTAボタン＆チェックリスト */
.yf-lp-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #0F172A;
color: #FFFFFF !important;
border: 1px solid #0F172A;
border-radius: 2px;
font-size: 13.5px;
font-weight: 800;
padding: 11px 22px;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none !important;
box-sizing: border-box;
letter-spacing: 0.03em;
}
.yf-lp-cta-btn:hover {
background: #0369A1;
border-color: #0369A1;
transform: translateY(-1px);
}
.yf-lp-check-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.yf-lp-check-item {
display: inline-flex;
align-items: center;
gap: 5px;
color: #44403C;
font-size: 12px;
font-weight: 700;
}
/* LP下部：招待状スタイルのクロージングバナー */
.yf-lp-bottom-cta-banner {
background: #1C1917;
color: #FAF8F5;
border: 1px solid #1C1917;
padding: 6px;
box-shadow: 0 12px 28px -8px rgba(28, 25, 23, 0.25);
}
.yf-lp-bottom-cta-inner {
border-top: 2px double rgba(250, 248, 245, 0.35);
border-bottom: 2px double rgba(250, 248, 245, 0.35);
padding: 22px 26px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
}
.yf-lp-bottom-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #FAF8F5;
color: #1C1917 !important;
font-size: 13.5px;
font-weight: 800;
padding: 12px 24px;
border-radius: 2px;
border: 1px solid #FAF8F5;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none !important;
white-space: nowrap;
letter-spacing: 0.03em;
}
.yf-lp-bottom-cta-btn:hover {
background: #E0F2FE;
color: #0369A1 !important;
border-color: #BAE6FD;
transform: translateY(-1px);
}
.yf-lp-bottom-sublink {
font-size: 11.5px;
font-weight: 600;
color: #D6D3CD !important;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.yf-lp-bottom-sublink:hover {
color: #FFFFFF !important;
}
@media (max-width: 768px) {
.yf-lp-gate-notice-inner {
padding: 16px 14px;
}
.yf-lp-gate-title {
font-size: 17px;
}
.yf-lp-gate-action-bar {
flex-direction: column;
align-items: stretch;
padding: 12px;
}
.yf-lp-editorial-sheet {
padding: 20px 14px;
}
.yf-lp-editorial-catch {
font-size: 18.5px;
}
.yf-lp-ui-window-body {
padding: 10px;
}
.yf-lp-venn-showcase-grid {
grid-template-columns: 1fr;
}
.yf-lp-visual-canvas {
padding: 12px 10px;
}
.yf-lp-cond-row {
grid-template-columns: 112px 1fr 112px;
gap: 6px;
}
.yf-lp-bottom-cta-inner {
padding: 18px 14px;
flex-direction: column;
align-items: stretch;
text-align: center;
}
.yf-lp-bottom-cta-btn,
.yf-lp-cta-btn {
width: 100%;
box-sizing: border-box;
}
}
/* 分析室：上部店舗・3タブ切替パネル ＆ 各タブの条件バー（Streamlit標準のMarkdown負マージンを打ち消し、重なりを完全防止） */
div[data-testid="stLayoutWrapper"]:has(> .st-key-act_top_controls),
div[data-testid="stLayoutWrapper"]:has(> .st-key-act_sec01_controls),
div[data-testid="stLayoutWrapper"]:has(> .st-key-act_sec02_controls) {
position: relative !important;
margin-bottom: 6px !important;
}
div.st-key-act_top_controls {
background: #FAF9F6 !important;
border: none !important;
border-bottom: none !important;
border-radius: 0px !important;
box-shadow: none !important;
padding: 4px 0 2px 0 !important;
gap: 6px !important;
box-sizing: border-box !important;
}
div.st-key-act_sec01_controls,
div.st-key-act_sec02_controls {
background: transparent !important;
border: none !important;
border-bottom: 1px solid #E5E2DC !important;
border-radius: 0px !important;
box-shadow: none !important;
padding: 2px 0 10px 0 !important;
margin-bottom: 12px !important;
gap: 6px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
div.st-key-act_sec01_controls,
div.st-key-act_sec02_controls {
padding: 0 0 8px 0 !important;
border-radius: 0px !important;
margin-bottom: 8px !important;
}
}
/* 分析室の目的・見方ガイドバナー（各タブ冒頭で「何が掲載され、どこを見れば何が得られるか」を明示） */
.act-purpose-guide-bar {
background: #FAF9F6;
border: 1px solid #D6D3CD;
border-left: 3.5px solid #1C1917;
padding: 8px 12px;
margin: 4px 0 10px 0;
}
.act-purpose-guide-top {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 3px;
}
.act-purpose-step-badge {
display: inline-block;
background: #1C1917;
color: #FFFFFF;
font-size: 10px;
font-weight: 800;
padding: 1px 6px;
letter-spacing: 0.04em;
margin-right: 6px;
vertical-align: 1px;
}
.act-purpose-title {
font-size: 13px;
font-weight: 800;
color: #1C1917;
}
.act-purpose-points {
font-size: 11.5px;
color: #44403C;
line-height: 1.65;
display: block;
}
.act-purpose-points b {
color: #1C1917;
}
.act-purpose-points span {
font-weight: 700;
color: #1C1917;
}
.act-purpose-line {
margin-bottom: 2px;
}
.act-purpose-line:last-child {
margin-bottom: 0;
}
/* =========================================================
分析室（フラット・単層ソリッド・数字主役）デザイン部品：ar-*
角丸の多重入れ子を排除し、シャープで視認性の高いレイアウト
========================================================= */
.ar-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; margin:8px 0 16px 0; }
.ar-eyebrow { font-size:12px; font-weight:600; color:#6A6A6A; letter-spacing:0.02em; }
.ar-title { font-size:24px; font-weight:800; color:#222222; line-height:1.25; letter-spacing:-0.02em; margin-top:2px; }
.ar-sub { font-size:13.5px; color:#6A6A6A; margin-top:4px; line-height:1.5; }
.ar-pill { display:inline-block; padding:4px 10px; border-radius:2px; background:#FAF9F6; border:1px solid #D6D3CD; color:#222222; font-size:12px; font-weight:600; line-height:1.4; white-space:normal; max-width:100%; box-sizing:border-box; word-break:break-word; }
.ar-label { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:18px; font-weight:800; color:#222222; letter-spacing:-0.01em; margin:24px 0 10px 0; }
.ar-label-sub { display:block; font-size:12.5px; font-weight:400; color:#6A6A6A; letter-spacing:0; margin-top:2px; }
.ar-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ar-grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ar-grid5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
@media (max-width: 960px) { .ar-grid3, .ar-grid4 { grid-template-columns:1fr 1fr; gap:12px; } .ar-grid5 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
@media (max-width: 768px) {
.ar-grid3 { grid-template-columns:1fr !important; gap:8px !important; }
.ar-grid4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
.ar-grid5 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px 10px !important; }
}
.ar-card { background:#FFFFFF; border:1px solid #E5E2DC; border-radius:4px; padding:18px 20px; box-shadow:none; min-width:0; max-width:100%; box-sizing:border-box; }
.ar-card[data-ag-spot="spot_12"] { background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; }
.ar-hero { background:#FFFFFF; border:1px solid #E5E2DC; border-top:2.5px solid #1C1917; border-radius:4px; padding:18px 20px 14px 20px; box-shadow:none; display:flex; flex-direction:column; min-width:0; max-width:100%; box-sizing:border-box; }
.ar-hero:hover, .ar-tile:hover { border-color:#1C1917; }
.ar-hero-tag { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#222222; background:#F4F4F5; border-radius:0px; padding:3px 9px; line-height:1.35; max-width:100%; box-sizing:border-box; }
.ar-hero-name { font-size:15px; font-weight:700; color:#222222; margin-top:10px; line-height:1.4; }
.ar-big { font-size:38px; font-weight:800; line-height:1.05; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; margin-top:8px; white-space:nowrap; color:#222222; }
.ar-big small { font-size:16px; font-weight:700; margin-left:3px; letter-spacing:0; }
.ar-big-cap { font-size:13px; color:#6A6A6A; margin-top:6px; line-height:1.45; }
.ar-hot { color:#BE123C !important; }
.ar-warm { color:#92400E !important; }
.ar-cool { color:#0F766E !important; }
.ar-calm { color:#222222; }
.ar-why { margin-top:auto; padding-top:12px; }
.ar-why summary { list-style:none; cursor:pointer; font-size:13px; font-weight:600; color:#222222; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:4px; }
.ar-why summary::-webkit-details-marker { display:none; }
.ar-why summary::after { content:"›"; font-size:15px; text-decoration:none; display:inline-block; transition:transform .2s; margin-left:2px; }
.ar-why[open] summary::after { transform:rotate(90deg); }
.ar-why-body { margin-top:8px; padding:10px 0 2px 0; background:transparent; border-top:1px dashed #D6D3CD; border-radius:0px; font-size:13px; color:#484848; line-height:1.65; }
.ar-why-body b { color:#222222; }
.ar-meter-name { font-size:14px; font-weight:700; color:#222222; white-space:nowrap; }
.ar-meter { display:flex; gap:4px; margin-top:8px; }
.ar-meter i { flex:1; height:6px; border-radius:0px; background:#EBEBEB; }
.ar-meter i.on { background:#222222; }
.ar-meter.neg i.on { background:#B0B0B0; }
.ar-meter-lv { font-size:12px; color:#6A6A6A; margin-top:6px; white-space:nowrap; }
/* ランキングタイル（単層ソリッド：角丸入れ子なし） */
.ar-tile { background:#FFFFFF; border-radius:4px; overflow:hidden; border:1px solid #E5E2DC; box-shadow:none; }
.ar-tile-visual { position:relative; height:96px; padding:12px; display:flex; flex-direction:column; justify-content:space-between; }
.ar-tile-rank { align-self:flex-start; background:#FFFFFF; color:#222222; font-size:11px; font-weight:800; padding:3px 8px; border-radius:0px; box-shadow:none; }
.ar-tile-pct { font-size:26px; font-weight:800; color:#FFFFFF; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.ar-tile-body { padding:12px 14px 14px 14px; }
.ar-tile-name { font-size:14px; font-weight:700; color:#222222; line-height:1.4; min-height:40px; }
.ar-tile-cap { font-size:12.5px; color:#6A6A6A; margin-top:3px; }
.ar-tile-num { font-size:14px; color:#222222; margin-top:6px; font-variant-numeric:tabular-nums; }
.ar-tile-num b { font-weight:800; }
.ar-t1 .ar-tile-visual { background:#18181B; }
.ar-t2 .ar-tile-visual { background:#92400E; }
.ar-t3 .ar-tile-visual { background:#334155; }
.ar-tn .ar-tile-visual { background:#F4F4F5; }
.ar-tn .ar-tile-pct { color:#3F3F46; text-shadow:none; }
/* 折りたたみ（詳細を見る） */
.ar-fold { margin-top:16px; background:#FFFFFF; border:1px solid #E5E2DC; border-radius:4px; box-shadow:none; }
.ar-fold > summary { list-style:none; cursor:pointer; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ar-fold > summary::-webkit-details-marker { display:none; }
.ar-fold-title { font-size:15px; font-weight:700; color:#222222; }
.ar-fold-sub { font-size:12.5px; color:#6A6A6A; margin-top:2px; }
.ar-fold-btn { font-size:12.5px; font-weight:700; color:#222222; white-space:nowrap; border:1px solid #222222; border-radius:2px; padding:5px 12px; }
.ar-fold[open] .ar-fold-btn::before { content:"閉じる"; }
.ar-fold:not([open]) .ar-fold-btn::before { content:"表示する"; }
.ar-fold-body { padding:4px 18px 18px 18px; border-top:1px solid #E5E2DC; }
.ar-fold-body .act-venn-map-panel { border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; background:transparent !important; }
/* ヒントカード（予測の理由） */
.ar-hint { background:#FFFFFF; border:1px solid #E5E2DC; border-radius:4px; padding:14px 16px; }
.ar-hint-k { font-size:12px; color:#6A6A6A; font-weight:600; }
.ar-hint-v { font-size:15.5px; font-weight:700; color:#222222; margin-top:4px; line-height:1.35; }
.ar-hint-badge { display:inline-block; margin-top:8px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:0px; background:#F4F4F5; color:#222222; }
.ar-actual { margin-top:12px; padding-top:10px; border-top:1px solid #EBEBEB; }
/* 要因別ランキング一覧テーブル（ホテル・気象条件・週末イベント共通） */
.ar-rank-card { background:#FFFFFF; border:1px solid #E5E2DC; border-radius:4px; overflow:hidden; box-shadow:none; margin-bottom:16px; }
.ar-rank-table { width:100%; border-collapse:collapse; font-size:13px; }
.ar-rank-table th { background:#F7F7F7; color:#6A6A6A; font-weight:600; font-size:11.5px; padding:9px 10px; border-bottom:1px solid #EBEBEB; white-space:nowrap; }
.ar-rank-table td { padding:10px 10px; border-bottom:1px solid #F0F0F0; color:#222222; vertical-align:middle; transition:background 0.15s ease; }
.ar-rank-table tr:last-child td { border-bottom:none; }
.ar-rank-row { cursor:default; transition:background 0.15s ease; }
.ar-rank-row:hover td { background:#FAFAFA; }
.ar-rank-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 8px; border-radius:2px; font-size:11.5px; font-weight:700; background:#F4F4F5; color:#3F3F46; border:1px solid #E4E4E7; white-space:nowrap; }
.ar-rank-badge.rank-1 { background:#FFF1F2; color:#BE123C; border:1px solid #FECDD3; font-weight:800; }
.ar-rank-badge.rank-ref { background:#F4F4F5; color:#52525B; font-weight:700; }
.ar-rank-subbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:8px 14px; background:#FAFAFA; border-top:1px solid #EBEBEB; box-sizing:border-box; font-size:11.5px; color:#52525B; }
/* 機能体験用サンプルデータ明示バナー（単層ソリッド・角丸控えめ） ＆ 無料ログインCTA */
.ar-sample-banner {
background: #18181B;
border: 1px solid #27272A;
border-radius: 4px;
padding: 12px 18px;
margin: 2px 0 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px 20px;
box-shadow: none;
}
.ar-sample-main {
flex: 1 1 420px;
min-width: 0;
}
.ar-sample-badge-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 4px;
}
.ar-sample-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, 0.12);
border: none;
color: #F4F4F5;
font-size: 10.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 2px;
letter-spacing: 0.03em;
}
.ar-sample-badge::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #F4F4F5;
}
.ar-sample-subbadge {
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, 0.60);
font-size: 10.5px;
font-weight: 500;
}
.ar-sample-title {
font-size: 13.5px;
font-weight: 700;
color: #FAFAFA;
letter-spacing: -0.01em;
line-height: 1.4;
margin-bottom: 2px;
}
.ar-sample-desc {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.55;
}
.ar-sample-desc b {
color: #FFFFFF;
font-weight: 600;
}
.ar-sample-cta-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 4px;
flex-shrink: 0;
}
.ar-sample-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #FFFFFF;
color: #111113 !important;
border: 1px solid #FFFFFF;
font-size: 12.5px;
font-weight: 700;
padding: 8px 16px;
border-radius: 2px;
cursor: pointer;
box-shadow: none;
transition: background 0.15s ease;
text-decoration: none !important;
white-space: nowrap;
}
.ar-sample-cta-btn:hover {
background: #F4F4F5;
}
.ar-sample-cta-note {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.52);
line-height: 1.3;
}
@media (max-width: 768px) {
.ar-sample-banner { padding: 8px 11px !important; border-radius: 4px !important; gap: 6px 10px !important; margin: 2px 0 6px 0 !important; }
.ar-sample-badge-row { margin-bottom: 2px !important; gap: 6px !important; }
.ar-sample-subbadge { display: none !important; }
.ar-sample-title { font-size: 12px !important; line-height: 1.35 !important; margin-bottom: 0 !important; }
.ar-sample-desc, .ar-sample-cta-note { display: none !important; }
.ar-sample-cta-wrap { width: 100% !important; align-items: stretch !important; }
.ar-sample-cta-btn { width: 100% !important; font-size: 11.5px !important; padding: 6px 10px !important; border-radius: 2px !important; box-sizing: border-box !important; text-align: center !important; }
.ar-head { margin: 2px 0 8px 0 !important; gap: 4px !important; align-items: flex-start !important; }
.ar-head .ar-eyebrow { display: none !important; }
.ar-title { font-size: 16.5px !important; line-height: 1.25 !important; margin-top: 0 !important; }
.ar-sub { font-size: 11.5px !important; line-height: 1.4 !important; margin-top: 2px !important; }
.ar-label { font-size: 15px !important; margin: 14px 0 8px 0 !important; gap: 6px !important; align-items: center !important; }
.ar-label-sub { font-size: 11px !important; line-height: 1.35 !important; margin-top: 1px !important; }
.ar-pill { font-size: 11px !important; padding: 3px 8px !important; border-radius: 2px !important; white-space: normal !important; line-height: 1.3 !important; }
.ar-card, .ar-hero { padding: 11px 12px !important; border-radius: 4px !important; }
.ar-hero-tag { font-size: 10.5px !important; padding: 2px 7px !important; border-radius: 0px !important; }
.ar-hero-name { font-size: 13.5px !important; margin-top: 6px !important; line-height: 1.35 !important; }
.ar-big { font-size: 25px !important; margin-top: 4px !important; white-space: normal !important; word-break: keep-all !important; line-height: 1.1 !important; }
.ar-big small { font-size: 13px !important; }
.ar-big-cap { font-size: 11.5px !important; margin-top: 4px !important; line-height: 1.35 !important; }
.ar-why { padding-top: 8px !important; }
.ar-why summary { font-size: 12px !important; }
.ar-why-body { padding: 8px 0 2px 0 !important; font-size: 12px !important; line-height: 1.55 !important; }
.ar-meter-name { font-size: 12.5px !important; white-space: normal !important; }
.ar-meter-lv { font-size: 11px !important; margin-top: 4px !important; white-space: normal !important; }
.ar-tile { display: flex !important; flex-direction: column !important; align-items: stretch !important; border-radius: 4px !important; }
.ar-tile-visual { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px !important; padding: 7px 10px !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 6px !important; box-sizing: border-box !important; }
.ar-tile-rank { font-size: 10.5px !important; padding: 2px 6px !important; border-radius: 0px !important; }
.ar-tile-pct { font-size: 18px !important; }
.ar-tile-body { flex: 1 !important; padding: 8px 10px 10px 10px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
.ar-tile-name { font-size: 12px !important; min-height: 0 !important; line-height: 1.3 !important; }
.ar-tile-cap { font-size: 10.5px !important; margin-top: 2px !important; line-height: 1.3 !important; }
.ar-tile-num { font-size: 11.5px !important; margin-top: 4px !important; }
.ar-fold { margin-top: 10px !important; border-radius: 4px !important; }
.ar-fold > summary { padding: 10px 12px !important; }
.ar-fold-title { font-size: 13px !important; line-height: 1.3 !important; }
.ar-fold-sub { font-size: 11px !important; }
.ar-fold-btn { font-size: 11px !important; padding: 4px 8px !important; border-radius: 2px !important; }
.ar-fold-body { padding: 4px 10px 12px 10px !important; }
.ar-hint { padding: 9px 11px !important; border-radius: 4px !important; }
.ar-hint-k { font-size: 11px !important; }
.ar-hint-v { font-size: 13.5px !important; margin-top: 2px !important; }
.ar-hint-badge { margin-top: 4px !important; font-size: 10.5px !important; padding: 2px 6px !important; border-radius: 0px !important; }
.ar-rank-card { border-radius: 4px !important; margin-bottom: 10px !important; }
.ar-rank-card > div[style*="overflow-x:auto"] { max-height: 260px !important; overflow-y: auto !important; }
.ar-rank-table { min-width: 560px !important; font-size: 11.5px !important; }
.ar-rank-table th, .ar-rank-table td { padding: 6px 6px !important; }
.ar-rank-subbar { padding: 6px 10px !important; gap: 6px !important; font-size: 10.5px !important; }
.ar-sub-pill { font-size: 11px !important; padding: 5px 8px !important; width: 100% !important; justify-content: center !important; }
/* スマホ時：「過去の日を探す」では上部に専用プルダウンがあるため左の重複比較表を畳み、該当営業日テーブルをすぐ表示 */
div[data-ag-target="spot_12_left"] { display: none !important; }
div[data-ag-target="spot_12_right"] .price-table-wrap { max-height: 260px !important; overflow-y: auto !important; }
}

/* ---------- アプリ全体（全タブ共通）：既存部品をフラット・単層に統一 ---------- */
.main .block-container,
[data-testid="stMainBlockContainer"] { font-family:'Plus Jakarta Sans','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans',sans-serif; }
.sec-title { border:none !important; background:transparent !important; padding:0 !important; margin:18px 0 8px 0 !important; display:flex !important; justify-content:space-between !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; white-space:normal !important; overflow:visible !important; height:auto !important; }
.sec-title > span:first-child { font-size:17px !important; font-weight:800 !important; color:#222222 !important; letter-spacing:-0.015em; white-space:normal !important; }
.sec-title > span:first-child svg { display:none; }
.sec-title > span:not(:first-child),
.sec-title > span:not(:first-child) span:not(.ag-spot-btn) { font-size:12px !important; color:#6A6A6A !important; font-weight:500 !important; }
.kpi-card.act-hero-card,
.act-hero-card {
background:#FFFFFF !important;
border:1px solid #E5E2DC !important;
border-top:2px solid #1C1917 !important;
border-radius:4px !important;
padding:16px 18px !important;
box-shadow:none !important;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.act-sub-summary-strip {
background:transparent !important;
border:none !important;
padding:0 !important;
margin-top:6px;
margin-bottom:12px;
}
.act-sub-summary-grid {
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:12px !important;
}
.act-sub-summary-item {
background:#FFFFFF !important;
border:1px solid #E5E2DC !important;
border-radius:4px !important;
padding:12px 14px !important;
box-shadow:none !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow-wrap:break-word !important;
}
@media (max-width: 1180px) {
.act-sub-summary-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
}
}
.act-venn-map-panel { background:#FFFFFF !important; border:1px solid #E5E2DC !important; border-radius:4px !important; padding:14px !important; box-shadow:none !important; }
.price-table-wrap { border:1px solid #E5E2DC !important; border-radius:4px !important; overflow:auto; box-shadow:none !important; background:#FFFFFF !important; }
.price-table-wrap.ar-venn-no-scroll { max-height:none !important; overflow-y:visible !important; overflow-x:auto !important; }
.price-table th { background:#F7F7F7 !important; color:#6A6A6A !important; font-weight:600 !important; font-size:12px !important; border:none !important; border-bottom:1px solid #EBEBEB !important; }
.price-table td { border:none !important; border-bottom:1px solid #F0F0F0 !important; font-size:13px !important; color:#222222; }
.price-table tr:last-child td { border-bottom:none !important; }
.ar-venn-drill-grid { display:grid; grid-template-columns:minmax(0, 1.04fr) minmax(0, 0.96fr); gap:16px; align-items:start; }
.ar-venn-drill-right { position:sticky; top:92px; align-self:start; }
@media (max-width: 980px) {
.ar-venn-drill-grid { grid-template-columns:1fr; gap:10px; }
.ar-venn-drill-right { position:static; }
}
.ar-venn-drill-tr { cursor:pointer !important; transition:background-color 0.12s ease !important; }
.ar-venn-drill-tr:hover td { background-color:#F8FAFC !important; }
.ar-venn-drill-tr.is-active td { background-color:#FAF9F6 !important; }
.ar-venn-drill-tr.is-active td:first-child { box-shadow:inset 3.5px 0 0 #18181B !important; }
.ar-venn-drill-tr .ar-venn-sel-badge { display:none; color:#18181B; font-size:10px; font-weight:800; margin-left:5px; background:#F4F4F5; border:1px solid #D4D4D8; padding:1px 6px; border-radius:2px; white-space:nowrap; }
.ar-venn-drill-tr.is-active .ar-venn-sel-badge { display:inline-block; }
.ar-venn-drill-select { width:100%; min-height:40px; padding:6px 32px 6px 10px; font-size:13px; font-weight:700; color:#18181B; background-color:#FFFFFF; border:1px solid #D4D4D8; border-radius:4px; cursor:pointer; appearance:auto; margin-bottom:10px; box-sizing:border-box; }
.ar-venn-drill-select:hover, .ar-venn-drill-select:focus { border-color:#18181B; outline:none; background-color:#FAF9F6; }
.ag-spot-btn,
.sec-title .ag-spot-btn,
.sec-title > span:not(:first-child) .ag-spot-btn,
.ar-head .ag-spot-btn,
.ar-label .ag-spot-btn,
.ar-hero .ag-spot-btn,
.ar-hint .ag-spot-btn {
appearance:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
border-radius:2px !important;
border:1px solid #CBD5E1 !important;
background:#F8FAFC !important;
color:#475569 !important;
font-size:11.5px !important;
font-weight:600 !important;
padding:3px 9px !important;
line-height:1.35 !important;
cursor:pointer !important;
white-space:nowrap !important;
box-shadow:none !important;
transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
text-decoration:none !important;
user-select:none !important;
flex-shrink:0 !important;
}
.ag-spot-btn svg,
.sec-title .ag-spot-btn svg,
.ar-label .ag-spot-btn svg {
display:inline-block !important;
width:13px !important;
height:13px !important;
flex-shrink:0 !important;
stroke:currentColor !important;
}
.ag-spot-btn:hover,
.sec-title .ag-spot-btn:hover,
.sec-title > span:not(:first-child) .ag-spot-btn:hover,
.ar-head .ag-spot-btn:hover,
.ar-label .ag-spot-btn:hover,
.ar-hero .ag-spot-btn:hover,
.ar-hint .ag-spot-btn:hover {
border-color:#94A3B8 !important;
background:#F1F5F9 !important;
color:#1E293B !important;
box-shadow:none !important;
transform:none !important;
}
.ag-spot-btn.ag-spot-playing,
.sec-title .ag-spot-btn.ag-spot-playing,
.sec-title > span:not(:first-child) .ag-spot-btn.ag-spot-playing {
background:#1E293B !important;
border-color:#1E293B !important;
color:#FFFFFF !important;
box-shadow:none !important;
}
[data-testid="stExpander"] details { border:1px solid #E5E2DC !important; border-radius:4px !important; background:#FFFFFF !important; box-shadow:none; }
[data-testid="stExpander"] summary { padding:14px 18px !important; font-size:15px !important; font-weight:700 !important; color:#222222 !important; }
[data-testid="stExpander"] summary p { font-size:15px !important; font-weight:700 !important; }
[data-baseweb="select"] > div { border-radius:4px !important; border-color:#DDDDDD !important; }
[data-testid="stVerticalBlockBorderWrapper"] { border-radius:4px !important; border-color:#E5E2DC !important; background:#FFFFFF !important; box-shadow:none; }
/* 音声ガイドメニュー */
.ag-actuals-root-marker.ar-audio-menu { border:1px solid #E5E2DC !important; border-radius:4px !important; background:#FFFFFF !important; padding:10px 14px !important; margin:4px 0 10px 0 !important; }
.ar-audio-menu > summary { font-size:13.5px !important; font-weight:600 !important; color:#222222 !important; }
@media (max-width: 860px) {
.act-sub-summary-grid {
grid-template-columns: 1fr;
gap: 8px !important;
}
}
/* 「グラフで確かめる」内の3つの要因別サブタブ（ホテルの料金と売上 ／ 天気・風・気温と売上 ／ 週末・イベントと売上）＆ 気象指標切替
※外枠コンテナの角丸・背景・枠線を完全に透明化し、角丸の多重入れ子をゼロにする */
div[class*="st-key-venn_ev_mode_sel_"],
div[class*="st-key-venn_ev_mode_sel_"] > div,
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stSegmentedControl"],
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"]:has(.react-aria-ToggleButtonGroup),
div[class*="st-key-t3_w_metric_"],
div[class*="st-key-t3_w_metric_"] > div,
div[class*="st-key-t3_w_metric_"] div[data-testid="stSegmentedControl"],
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"]:has(.react-aria-ToggleButtonGroup) {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
border-radius: 0px !important;
padding: 0px !important;
margin: 0px !important;
box-shadow: none !important;
}
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] .react-aria-ToggleButtonGroup,
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"].cf-st-btngroup,
div[class*="st-key-venn_ev_mode_sel_"] [role="radiogroup"],
div[class*="st-key-venn_ev_mode_sel_"] [data-baseweb="button-group"] {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: 100% !important;
max-width: 100% !important;
gap: 0px !important;
background: transparent !important;
border: 1px solid #D6D3CD !important;
border-bottom: 2px solid #18181B !important;
border-radius: 0px !important;
padding: 0px !important;
margin: 2px 0 10px 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button,
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stSegmentedControl"] button,
div[class*="st-key-venn_ev_mode_sel_"] button {
width: 100% !important;
min-width: 0 !important;
min-height: 40px !important;
height: auto !important;
padding: 8px 10px !important;
border-radius: 0px !important;
border: none !important;
border-right: 1px solid #D6D3CD !important;
background: #FAF9F6 !important;
color: #57534E !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
box-shadow: none !important;
margin: 0px !important;
transition: background-color 0.14s ease, color 0.14s ease !important;
}
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button:last-of-type,
div[class*="st-key-venn_ev_mode_sel_"] button:last-of-type {
border-right: none !important;
}
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button p,
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button span,
div[class*="st-key-venn_ev_mode_sel_"] button p,
div[class*="st-key-venn_ev_mode_sel_"] button span {
white-space: normal !important;
line-height: 1.3 !important;
color: inherit !important;
font-weight: inherit !important;
margin: 0 !important;
}
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button:hover:not([aria-checked="true"]):not([aria-pressed="true"]):not([data-testid="stBaseButton-segmented_controlActive"]):not(.wp-opt-seg-active),
div[class*="st-key-venn_ev_mode_sel_"] button:hover:not([aria-checked="true"]):not([aria-pressed="true"]):not([data-testid="stBaseButton-segmented_controlActive"]):not(.wp-opt-seg-active) {
background: #F4F4F5 !important;
color: #18181B !important;
}
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active,
div[class*="st-key-venn_ev_mode_sel_"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-venn_ev_mode_sel_"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-venn_ev_mode_sel_"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-venn_ev_mode_sel_"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-venn_ev_mode_sel_"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-venn_ev_mode_sel_"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-venn_ev_mode_sel_"] button.wp-opt-seg-active {
background: #18181B !important;
color: #FFFFFF !important;
border: none !important;
border-right: 1px solid #18181B !important;
border-radius: 0px !important;
font-weight: 800 !important;
box-shadow: none !important;
transform: none !important;
}
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active p,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active span,
div[class*="st-key-venn_ev_mode_sel_"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-venn_ev_mode_sel_"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-venn_ev_mode_sel_"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-venn_ev_mode_sel_"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) p {
color: #FFFFFF !important;
font-weight: 800 !important;
}
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"])::before,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"])::before,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"])::before,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"])::before,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"])::before,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"])::before,
.stApp div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active::before {
background-color: #FFFFFF !important;
}
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] .react-aria-ToggleButtonGroup,
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"].cf-st-btngroup,
div[class*="st-key-t3_w_metric_"] [role="radiogroup"],
div[class*="st-key-t3_w_metric_"] [data-baseweb="button-group"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 6px !important;
width: 100% !important;
background: transparent !important;
border: none !important;
border-radius: 0px !important;
padding: 0px !important;
margin: 2px 0 6px 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button,
div[class*="st-key-t3_w_metric_"] div[data-testid="stSegmentedControl"] button,
div[class*="st-key-t3_w_metric_"] button {
border-radius: 2px !important;
border: 1px solid #D6D3CD !important;
background: #FFFFFF !important;
color: #475569 !important;
min-height: 34px !important;
height: auto !important;
padding: 5px 12px !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
white-space: normal !important;
box-sizing: border-box !important;
box-shadow: none !important;
transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease !important;
}
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button:hover:not([aria-checked="true"]):not([aria-pressed="true"]):not([data-testid="stBaseButton-segmented_controlActive"]):not(.wp-opt-seg-active),
div[class*="st-key-t3_w_metric_"] button:hover:not([aria-checked="true"]):not([aria-pressed="true"]):not([data-testid="stBaseButton-segmented_controlActive"]):not(.wp-opt-seg-active) {
border-color: #18181B !important;
background: #FAF9F6 !important;
color: #18181B !important;
}
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]),
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active,
div[class*="st-key-t3_w_metric_"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-t3_w_metric_"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-t3_w_metric_"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-t3_w_metric_"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-t3_w_metric_"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-t3_w_metric_"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-t3_w_metric_"] button.wp-opt-seg-active {
background: #18181B !important;
color: #FFFFFF !important;
border-color: #18181B !important;
border-radius: 2px !important;
font-weight: 800 !important;
box-shadow: none !important;
}
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) span,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active p,
.stApp div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button.wp-opt-seg-active span,
div[class*="st-key-t3_w_metric_"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-t3_w_metric_"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-t3_w_metric_"] button[kind$="Active"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-t3_w_metric_"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) p {
color: #FFFFFF !important;
font-weight: 800 !important;
}
@media (max-width: 768px) {
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button,
div[class*="st-key-venn_ev_mode_sel_"] button {
width: 100% !important;
min-height: 36px !important;
padding: 6px 4px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
div[class*="st-key-venn_ev_mode_sel_"] div[data-testid="stButtonGroup"] button::before,
div[class*="st-key-venn_ev_mode_sel_"] button::before {
display: none !important;
}
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] .react-aria-ToggleButtonGroup,
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"].cf-st-btngroup {
gap: 4px !important;
}
div[class*="st-key-t3_w_metric_"] div[data-testid="stButtonGroup"] button,
div[class*="st-key-t3_w_metric_"] button {
flex: 1 1 auto !important;
justify-content: center !important;
text-align: center !important;
font-size: 11px !important;
min-height: 30px !important;
padding: 4px 8px !important;
}
}
/* 分析室 4タブ切替バー（需要予測 ／ 混む日の法則 ／ グラフで確かめる ／ 売上をつける）
※親・中間ラッパーの枠線・角丸をすべて無効化し、単層フラットタブバーに統一 */
div[class*="st-key-ar_subtab_nav"],
div[class*="st-key-act_subtab_mode_"],
div[class*="st-key-act_subtab_mode_"] > div,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stSegmentedControl"],
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"]:has(.react-aria-ToggleButtonGroup) {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
border-radius: 0px !important;
padding: 0px !important;
margin: 0px !important;
box-shadow: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] .react-aria-ToggleButtonGroup,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"].cf-st-btngroup,
div[class*="st-key-act_subtab_mode_"] [role="radiogroup"],
div[class*="st-key-act_subtab_mode_"] [data-baseweb="button-group"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
gap: 0px !important;
column-gap: 0px !important;
row-gap: 0px !important;
background: #FAF9F6 !important;
border: 1px solid #E5E2DC !important;
border-bottom: 1.5px solid #1C1917 !important;
border-radius: 0px !important;
padding: 0px !important;
margin-top: 2px !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-variant="segmented_control"],
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stSegmentedControl"] button,
div[class*="st-key-act_subtab_mode_"] button {
flex: 1 1 0% !important;
width: 25% !important;
min-width: 0 !important;
min-height: 40px !important;
height: 40px !important;
max-height: none !important;
padding: 6px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #57534E !important;
background: #FAF9F6 !important;
border: none !important;
border-right: 1px solid #E5E2DC !important;
border-radius: 0px !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
margin: 0px !important;
box-shadow: none !important;
white-space: nowrap !important;
overflow: visible !important;
transition: background-color 0.14s ease, color 0.14s ease !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button p,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button span,
div[class*="st-key-act_subtab_mode_"] button p,
div[class*="st-key-act_subtab_mode_"] button span {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
margin: 0 !important;
}
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button,
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button[kind="secondary"],
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button[kind="secondary"] {
min-height: 40px !important;
height: 40px !important;
padding: 0 4px !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
border-radius: 0px !important;
color: transparent !important;
font-size: 0px !important;
box-shadow: none !important;
outline: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button p,
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button span,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button p,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button span {
display: none !important;
}
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button::before,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: #475569;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: background-color 0.15s ease, transform 0.15s ease;
}
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button:hover,
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button[kind="secondary"]:hover,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button:hover,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button[kind="secondary"]:hover {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button:hover::before,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button:hover::before {
background-color: #0284C7;
transform: scale(1.08);
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button:last-child,
div[class*="st-key-act_subtab_mode_"] button:last-child {
border-right: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button:hover,
div[class*="st-key-act_subtab_mode_"] button:hover {
background: #FFFFFF !important;
color: #1C1917 !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]),
div[class*="st-key-act_subtab_mode_"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) {
background: #FFFFFF !important;
color: #1C1917 !important;
font-weight: 800 !important;
border-top: 2.5px solid #1C1917 !important;
box-shadow: inset 0 -1px 0 #FFFFFF !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] button[data-testid="stBaseButton-segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] button[kind="segmented_controlActive"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] button[aria-checked="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] button[aria-pressed="true"]:not([data-wp-opt-inactive="1"]) p,
div[class*="st-key-act_subtab_mode_"] button[data-selected="true"]:not([data-wp-opt-inactive="1"]) p {
color: #1C1917 !important;
font-weight: 800 !important;
}
/* 4つのメインタブのSVGアイコン（currentColor連動） */
div[class*="st-key-act_subtab_mode_"] button::before,
div[class*="st-key-venn_ev_mode_sel_"] button::before,
div[class*="st-key-t1_open_model_btn_"] button::before,
div[class*="st-key-t1_open_logic_btn_"] button::before,
div[class*="st-key-btn_open_venn_modal_"] button::before,
div[class*="st-key-act_t4_open_reg_modal_"] button::before,
div[class*="st-key-act_t4_open_csv_modal_"] button::before,
div[class*="st-key-act_t5_dl_csv_"] button::before,
.st-key-act_t5_open_reg button::before,
.st-key-act_t5_open_hmap button::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
vertical-align: -2px;
}
.act-core-conclusions-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 860px) {
.act-core-conclusions-grid {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* タブ：需要予測（オーナー特別アクセス4タブ時の1番目：トレンド上昇アイコン） */
div[class*="st-key-act_subtab_mode_adm4_"] button:nth-of-type(1)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
}
/* タブ：繁閑の結論・重なり（一般3タブ時の1番目 ／ 特別アクセス4タブ時の2番目：3円ベン図アイコン） */
div[class*="st-key-act_subtab_mode_pub3_"] button:nth-of-type(1)::before,
div[class*="st-key-act_subtab_mode_adm4_"] button:nth-of-type(2)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9.5' r='5.5'/%3E%3Ccircle cx='15' cy='9.5' r='5.5'/%3E%3Ccircle cx='12' cy='14.8' r='5.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9.5' r='5.5'/%3E%3Ccircle cx='15' cy='9.5' r='5.5'/%3E%3Ccircle cx='12' cy='14.8' r='5.5'/%3E%3C/svg%3E");
}
/* タブ：要因別の詳細グラフ（一般3タブ時の2番目 ／ 特別アクセス4タブ時の3番目：棒グラフ・相関アイコン） */
div[class*="st-key-act_subtab_mode_pub3_"] button:nth-of-type(2)::before,
div[class*="st-key-act_subtab_mode_adm4_"] button:nth-of-type(3)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3Cline x1='3' y1='20' x2='21' y2='20'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3Cline x1='3' y1='20' x2='21' y2='20'/%3E%3C/svg%3E");
}
/* タブ：営業データ台帳（一般3タブ時の3番目 ／ 特別アクセス4タブ時の4番目：テーブル・台帳アイコン） */
div[class*="st-key-act_subtab_mode_pub3_"] button:nth-of-type(3)::before,
div[class*="st-key-act_subtab_mode_adm4_"] button:nth-of-type(4)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='9' y1='9' x2='9' y2='21'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='9' y1='9' x2='9' y2='21'/%3E%3C/svg%3E");
}
/* 要因別サブ切替：1=ホテル価格・2=天候・3=イベント */
div[class*="st-key-venn_ev_mode_sel_"] button:nth-of-type(1)::before,
.st-key-act_t5_open_hmap button::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M9 9h2'/%3E%3Cpath d='M13 9h2'/%3E%3Cpath d='M9 13h2'/%3E%3Cpath d='M13 13h2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M9 9h2'/%3E%3Cpath d='M13 9h2'/%3E%3Cpath d='M9 13h2'/%3E%3Cpath d='M13 13h2'/%3E%3C/svg%3E");
}
div[class*="st-key-venn_ev_mode_sel_"] button:nth-of-type(2)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
}
div[class*="st-key-venn_ev_mode_sel_"] button:nth-of-type(3)::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* 予測モデル・算出ロジック・統計一覧ボタン（スライダー・情報アイコン） */
div[class*="st-key-t1_open_model_btn_"] button::before,
div[class*="st-key-t1_open_logic_btn_"] button::before,
div[class*="st-key-btn_open_venn_modal_"] button::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}
/* データ登録・編集ボタン（ペンシル・プラスアイコン） */
div[class*="st-key-act_t4_open_reg_modal_"] button::before,
.st-key-act_t5_open_reg button::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
}
/* CSV取込・CSV出力アイコン */
div[class*="st-key-act_t4_open_csv_modal_"] button::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}
div[class*="st-key-act_t5_dl_csv_"] button::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
/* 分析室 タブ②：3要因の重なりマップ（ベン図） PC／スマホ別最適化レイアウト */
.act-venn-layout-grid {
display: grid;
grid-template-columns: 0.55fr 0.45fr;
gap: 18px;
align-items: start;
}
.act-venn-map-panel {
background: #FFFFFF;
border: 1px solid #CBD5E1;
padding: 12px 14px;
position: sticky;
top: 56px;
box-sizing: border-box;
}
.act-venn-svg {
width: 100%;
height: auto;
max-height: 620px;
display: block;
margin: 0 auto;
font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
@media (max-width: 960px) {
.act-venn-layout-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.act-venn-map-panel {
position: static !important;
padding: 10px 8px !important;
}
.act-venn-svg {
max-height: 540px !important;
}
}
@media (max-width: 768px) {
.act-venn-map-panel {
padding: 6px 4px 10px 4px !important;
}
.act-venn-svg {
width: 100% !important;
max-height: none !important;
}
}
div.st-key-act_top_controls [data-testid="stVerticalBlock"],
div.st-key-act_sec01_controls [data-testid="stVerticalBlock"],
div.st-key-act_sec02_controls [data-testid="stVerticalBlock"] {
gap: 4px !important;
}
div.st-key-act_top_controls div[data-testid="stElementContainer"],
div.st-key-act_top_controls .stMarkdown,
div.st-key-act_top_controls div[data-testid="stMarkdown"],
div.st-key-act_top_controls div[data-testid="stMarkdownContainer"],
div.st-key-act_sec01_controls div[data-testid="stElementContainer"],
div.st-key-act_sec01_controls .stMarkdown,
div.st-key-act_sec01_controls div[data-testid="stMarkdown"],
div.st-key-act_sec01_controls div[data-testid="stMarkdownContainer"],
div.st-key-act_sec02_controls div[data-testid="stElementContainer"],
div.st-key-act_sec02_controls .stMarkdown,
div.st-key-act_sec02_controls div[data-testid="stMarkdown"],
div.st-key-act_sec02_controls div[data-testid="stMarkdownContainer"] {
margin: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
padding: 0px !important;
}
div.st-key-act_top_controls label[data-testid="stWidgetLabel"],
div.st-key-act_sec01_controls label[data-testid="stWidgetLabel"],
div.st-key-act_sec02_controls label[data-testid="stWidgetLabel"] {
display: none !important;
height: 0px !important;
min-height: 0px !important;
margin: 0px !important;
padding: 0px !important;
}
/* 分析室：各セクションの見出し＋表示条件バー（スクロール位置に応じて自動追従） */
.act-sec-sticky-slot {
width: 100%;
margin: 14px 0 8px 0;
box-sizing: border-box;
}
.act-sec-sticky-bar {
background: rgba(250, 249, 246, 0.97);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 2px solid #0F172A;
border-bottom: 1.5px solid #CBD5E1;
padding: 7px 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px 12px;
box-sizing: border-box;
transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.act-sec-sticky-bar.is-sec-01 {
border-top-color: #18181B;
}
.act-sec-sticky-bar.is-sec-02 {
border-top-color: #18181B;
}
.act-sec-sticky-bar.is-sec-03 {
border-top-color: #0F172A;
}
.act-sec-sticky-bar.is-pinned {
background: rgba(255, 255, 255, 0.98) !important;
border-bottom: 1.5px solid #94A3B8 !important;
box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.12) !important;
padding: 7px 14px !important;
}
.act-sec-title-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.act-sec-num {
font-family: 'JetBrains Mono', 'Inter', monospace;
font-size: 11.5px;
font-weight: 800;
color: #FFFFFF;
background: #18181B;
padding: 1px 6px;
letter-spacing: 0.04em;
line-height: 1.4;
}
.act-sec-sticky-bar.is-sec-01 .act-sec-num {
background: #18181B;
}
.act-sec-sticky-bar.is-sec-02 .act-sec-num {
background: #18181B;
}
.act-sec-main-title {
font-size: 14.5px;
font-weight: 800;
color: #0F172A;
letter-spacing: 0.01em;
}
.act-sec-target-badge {
font-size: 12px;
font-weight: 800;
color: #3F3F46;
background: #F4F4F5;
border: 1px solid #E4E4E7;
padding: 1px 8px;
}
.act-sec-sticky-bar.is-sec-02 .act-sec-target-badge {
color: #3F3F46;
background: #F4F4F5;
border-color: #E4E4E7;
}
.act-sec-sticky-bar.is-sec-03 .act-sec-target-badge {
color: #3F3F46;
background: #F4F4F5;
border-color: #E4E4E7;
}
.act-sec-cond-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 11px;
font-weight: 700;
color: #334155;
}
.act-sec-cond-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #FFFFFF;
border: 1px solid #E4E4E7;
padding: 2px 8px;
color: #1E293B;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
}
.act-sec-cond-pill b {
color: #0F172A;
font-weight: 800;
}
.act-sec-cond-pill.is-accent-blue {
background: #F4F4F5;
border-color: #E4E4E7;
color: #3F3F46;
}
.act-sec-cond-pill.is-accent-wine {
background: #F4F4F5;
border-color: #E4E4E7;
color: #3F3F46;
}
.act-jump-top-link {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 800;
color: #0284C7;
background: #FFFFFF;
border: 1px solid #7DD3FC;
padding: 2px 7px;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
}
.act-jump-top-link:hover {
background: #0284C7;
color: #FFFFFF;
border-color: #0284C7;
}
#stFloatingOverlayPortal,
div[data-rac][role="dialog"],
div[data-testid="stSelectboxVirtualDropdown"],
div[data-testid="stPopoverBody"],
div[data-baseweb="popover"] {
z-index: 1000010 !important;
}
@media (max-width: 768px) {
div.st-key-act_top_controls {
padding: 4px 0 8px 0 !important;
}
.act-sec-sticky-bar {
padding: 6px 8px;
}
.act-sec-main-title {
font-size: 13px;
}
.act-sec-cond-pill {
font-size: 10px;
padding: 1px 6px;
}
}
.st-key-act_open_settings_btn .stButton > button,
.st-key-act_open_settings_btn .stButton > button[kind="secondary"],
.st-key-act_empty_open_settings_btn .stButton > button,
.st-key-act_empty_open_settings_btn .stButton > button[kind="secondary"],
div[class*="st-key-t1_open_logic_btn_"] .stButton > button,
div[class*="st-key-t1_open_logic_btn_"] .stButton > button[kind="secondary"] {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
color: #334155 !important;
font-weight: 800 !important;
font-size: 12.5px !important;
border-radius: 0px !important;
padding: 4px 6px !important;
min-height: 40px !important;
height: 40px !important;
box-shadow: none !important;
outline: none !important;
transition: color 0.15s ease, opacity 0.15s ease !important;
}
.st-key-act_open_settings_btn .stButton > button p,
.st-key-act_empty_open_settings_btn .stButton > button p,
div[class*="st-key-t1_open_logic_btn_"] .stButton > button p {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.st-key-act_open_settings_btn .stButton > button p::before,
.st-key-act_empty_open_settings_btn .stButton > button p::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
flex-shrink: 0;
background-color: #0284C7;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l.06-.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: background-color 0.15s ease, transform 0.25s ease;
}
.st-key-act_open_settings_btn .stButton > button:hover,
.st-key-act_open_settings_btn .stButton > button[kind="secondary"]:hover,
.st-key-act_empty_open_settings_btn .stButton > button:hover,
.st-key-act_empty_open_settings_btn .stButton > button[kind="secondary"]:hover,
div[class*="st-key-t1_open_logic_btn_"] .stButton > button:hover,
div[class*="st-key-t1_open_logic_btn_"] .stButton > button[kind="secondary"]:hover {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
color: #0284C7 !important;
box-shadow: none !important;
}
.st-key-act_open_settings_btn .stButton > button:hover p::before,
.st-key-act_empty_open_settings_btn .stButton > button:hover p::before {
background-color: #0369A1;
transform: rotate(30deg);
}
.st-key-act_back_to_analysis_btn button {
background: #FFFFFF !important;
border: 1.5px solid #CBD5E1 !important;
color: #0F172A !important;
font-weight: 800 !important;
font-size: 12.5px !important;
border-radius: 6px !important;
padding: 6px 14px !important;
min-height: 46px !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
transition: all 0.15s ease !important;
}
.st-key-act_back_to_analysis_btn button:hover {
background: #F0F9FF !important;
border-color: #0284C7 !important;
color: #0369A1 !important;
}
.yf-inline-vid-drawer {
margin-top: 8px;
padding: 8px 10px 10px 10px;
background: #F8FAFC;
border: 1px solid #CBD5E1;
border-radius: 6px;
}
.yf-inline-vid-player-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.yf-inline-vid-close-btn {
background: #FFFFFF;
border: 1px solid #CBD5E1;
color: #334155;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
}
.yf-inline-vid-close-btn:hover {
background: #0F172A;
border-color: #0F172A;
color: #FFFFFF;
}
.yf-inline-vid-iframe-wrap {
position: relative;
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
background: #0F172A;
border-radius: 4px;
overflow: hidden;
}
.yf-inline-vid-iframe-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.portal-logo-group[data-logo-home-jump] {
cursor: pointer;
transition: opacity 0.15s ease;
}
.portal-logo-group[data-logo-home-jump]:hover {
opacity: 0.85;
}
.portal-logo-group[data-logo-home-jump]:hover .portal-logo-title {
color: #F6821F;
}
.portal-admin-opendata-link {
font-size: 10.5px;
color: #6B7280;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.12s ease;
}
.portal-admin-opendata-link:hover {
color: #B4532A;
}

/* =========================================================
AI解釈を示すSVGロボットアイコンバッジ ＆ ドリリングUI
========================================================= */
.ai-bot-svg-badge {
display: inline-flex;
align-items: center;
justify-content: center;
color: #3F3F46;
background: transparent;
border: none;
padding: 0;
vertical-align: -2px;
margin-right: 4px;
line-height: 1;
flex-shrink: 0;
}
.tag-fact-label {
display: inline-flex;
align-items: center;
font-family: 'JetBrains Mono', 'Inter', 'Noto Sans JP', monospace;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.06em;
color: #1C1917;
background: #EFECE6;
border: 1px solid #D6D3CD;
padding: 1px 6px;
border-radius: 0 !important;
white-space: nowrap;
flex-shrink: 0;
}
.tag-interp-label {
display: inline-flex;
align-items: center;
justify-content: center;
color: #3F3F46;
background: #F4F4F5;
border: 1px solid #E4E4E7;
padding: 2px 4px;
border-radius: 0 !important;
white-space: nowrap;
flex-shrink: 0;
}
.drill-trigger-link {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 700;
color: #1C1917 !important;
border-bottom: 1px solid #1C1917;
padding-bottom: 1px;
cursor: pointer;
text-decoration: none !important;
transition: color 0.14s ease, border-color 0.14s ease;
white-space: nowrap;
}
.drill-trigger-link:hover {
color: #B4532A !important;
border-bottom-color: #B4532A;
}

/* =========================================================
「転職会議」方式：途中まで鮮明に見せ、後半・核心をぼかすUI
========================================================= */
.tc-blur-wall-wrap {
position: relative;
overflow: hidden;
background: transparent;
}
.tc-blur-clear-zone {
position: relative;
z-index: 1;
}
.tc-blur-masked-zone {
position: relative;
filter: blur(4.6px);
-webkit-filter: blur(4.6px);
opacity: 0.68;
user-select: none !important;
pointer-events: none !important;
transition: filter 0.2s ease;
}
.tc-blur-fade-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 24px;
background: linear-gradient(180deg, rgba(250, 249, 246, 0.05) 0%, rgba(250, 249, 246, 0.88) 42%, rgba(250, 249, 246, 0.98) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 16px 14px 12px 14px;
z-index: 10;
text-align: center;
}
.tc-blur-cta-box {
background: #FAF9F6;
border: 1px solid #1C1917;
border-top: 2px solid #1C1917;
padding: 10px 16px;
max-width: 540px;
width: 100%;
box-sizing: border-box;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.tc-blur-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #1C1917;
color: #FAF9F6 !important;
border: 1px solid #1C1917;
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: 0 !important;
cursor: pointer;
white-space: nowrap;
transition: background 0.14s ease, color 0.14s ease;
text-decoration: none !important;
}
.tc-blur-cta-btn:hover {
background: #B4532A;
border-color: #B4532A;
color: #FAF9F6 !important;
}
tr.tc-blur-row td {
filter: blur(4.4px);
-webkit-filter: blur(4.4px);
opacity: 0.62;
user-select: none !important;
pointer-events: none !important;
}
.tc-inline-blur-val {
filter: blur(4.2px);
-webkit-filter: blur(4.2px);
opacity: 0.65;
user-select: none !important;
pointer-events: none !important;
display: inline-block;
}

/* バックエンド連携用の非表示トリガーボタン（画面外に退避してレイアウト影響ゼロ） */
[class*="st-key-area_jump_"],
[class*="st-key-area_drill_"],
[class*="st-key-art_open_area_drill_"],
[class*="st-key-cell_open_"],
[class*="st-key-art_open_"],
[class*="st-key-footer_legal_btn_"],
.st-key-global_paywall_open_btn,
.st-key-portal_contact_open_btn,
.st-key-header_google_login_btn,
.st-key-logo_jump_home,
.st-key-footer_jump_raw_data,
[class*="st-key-mst_row_sel_"],
[class*="st-key-mst_row_del_"],
[class*="st-key-mst_htog_"],
[class*="st-key-mdl_focus_h_"],
[class*="st-key-mdl_add_h_"],
[class*="st-key-mdl_rem_h_"],
[class*="st-key-g_acct_trig_"],
.st-key-wp_btn_collapse_top,
div[data-testid="stElementContainer"][class*="st-key-area_jump_"],
div[data-testid="stElementContainer"][class*="st-key-area_drill_"],
div[data-testid="stElementContainer"][class*="st-key-art_open_area_drill_"],
div[data-testid="stElementContainer"][class*="st-key-cell_open_"],
div[data-testid="stElementContainer"][class*="st-key-art_open_"],
div[data-testid="stElementContainer"][class*="st-key-footer_legal_btn_"],
div[data-testid="stElementContainer"].st-key-global_paywall_open_btn,
div[data-testid="stElementContainer"].st-key-portal_contact_open_btn,
div[data-testid="stElementContainer"].st-key-header_google_login_btn,
div[data-testid="stElementContainer"].st-key-logo_jump_home,
div[data-testid="stElementContainer"].st-key-footer_jump_raw_data,
div[data-testid="stElementContainer"][class*="st-key-mst_row_sel_"],
div[data-testid="stElementContainer"][class*="st-key-mst_row_del_"],
div[data-testid="stElementContainer"][class*="st-key-mst_htog_"],
div[data-testid="stElementContainer"][class*="st-key-mdl_focus_h_"],
div[data-testid="stElementContainer"][class*="st-key-mdl_add_h_"],
div[data-testid="stElementContainer"][class*="st-key-mdl_rem_h_"],
div[data-testid="stElementContainer"][class*="st-key-g_acct_trig_"],
div[data-testid="stElementContainer"].st-key-wp_btn_collapse_top,
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-area_jump_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-area_drill_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-art_open_area_drill_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-cell_open_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-art_open_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-footer_legal_btn_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> .st-key-global_paywall_open_btn),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> .st-key-portal_contact_open_btn),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> .st-key-header_google_login_btn),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> .st-key-logo_jump_home),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> .st-key-footer_jump_raw_data),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-mst_row_sel_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-mst_row_del_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-mst_htog_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-mdl_focus_h_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-mdl_add_h_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-mdl_rem_h_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> [class*="st-key-g_acct_trig_"]),
div[data-testid="stElementContainer"]:not(:has([data-testid="stVerticalBlock"])):has(> .st-key-wp_btn_collapse_top) {
position: fixed !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -1 !important;
}
iframe[height="0"] {
display: block !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
pointer-events: none !important;
}

/* =========================================================
T-4 ロゴを引き立てるナチュラル＆クリーンなポータルUI（深海ネイビー〜美ら海ブルー＆スレート基調）
========================================================= */
html, body, .stApp {
background-color: #FAF9F6 !important;
color: #0F172A !important;
}
/* モーダル表示時：呼び出し元ページ全体を深くぼかし・暗転させ、中央のログインフォームへ視線を集中させる */
div[data-testid="stDialog"],
.stDialog {
z-index: 1000005 !important;
background: radial-gradient(circle at 50% 38%, rgba(15, 23, 42, 0.64) 0%, rgba(7, 12, 24, 0.85) 100%) !important;
backdrop-filter: blur(16px) saturate(120%) !important;
-webkit-backdrop-filter: blur(16px) saturate(120%) !important;
transition: backdrop-filter 0.22s ease, background 0.22s ease !important;
}
div[data-testid="stDialog"] > div[data-baseweb="modal"],
div[data-baseweb="modal"] > div:first-child {
background-color: rgba(15, 23, 42, 0.64) !important;
backdrop-filter: blur(16px) saturate(120%) !important;
-webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}
body:has(div[data-testid="stDialog"]) [data-testid="stMain"],
body:has(div[data-testid="stDialog"]) .yf-portal-top-shell,
body:has(div[data-testid="stDialog"]) .portal-footer-wrap {
filter: blur(10px) brightness(0.80) saturate(0.86) !important;
transition: filter 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) > div {
border-radius: 12px !important;
box-shadow: 0 28px 56px -12px rgba(2, 6, 23, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.92) inset !important;
border: 1px solid rgba(203, 213, 225, 0.95) !important;
background: #FFFFFF !important;
max-height: calc(100vh - 28px) !important;
max-height: calc(100dvh - 28px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) div[role="dialog"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
max-height: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) {
align-items: flex-start !important;
padding: 14px 8px !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) > div {
width: min(92vw, 420px) !important;
max-width: 420px !important;
min-width: min(92vw, 320px) !important;
max-height: calc(100vh - 28px) !important;
max-height: calc(100dvh - 28px) !important;
margin: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 16px !important;
border: 1px solid rgba(226, 232, 240, 0.98) !important;
border-top: 4px solid #0284C7 !important;
box-shadow: 0 32px 64px -12px rgba(2, 6, 23, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.96) inset, 0 0 44px rgba(2, 132, 199, 0.22) !important;
background: #FFFFFF !important;
padding: 4px 6px 8px 6px !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:has(.yf-modern-reg-modal) > div {
width: min(94vw, 480px) !important;
max-width: 480px !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) {
align-items: flex-start !important;
padding: 12px 8px !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) > div {
width: min(94vw, 560px) !important;
max-width: 560px !important;
min-width: min(94vw, 310px) !important;
max-height: calc(100vh - 24px) !important;
max-height: calc(100dvh - 24px) !important;
margin: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 20px !important;
border: 1px solid #EBEBEB !important;
box-shadow: 0 28px 60px -12px rgba(15, 23, 42, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.96) inset !important;
background: #FFFFFF !important;
padding: 4px 8px 8px 8px !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) div[role="dialog"] {
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [slot="title"] {
padding: 14px 16px 6px 16px !important;
font-size: 17px !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [slot="title"] + div {
padding: 4px 16px 12px 16px !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) button[aria-label="Close"] {
top: 14px !important;
right: 14px !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-testid="stWidgetLabel"] p {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #222222 !important;
letter-spacing: -0.01em !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="input"],
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="base-input"],
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="textarea"],
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="select"] > div {
border-radius: 12px !important;
border-color: #DDDDDD !important;
background-color: #FFFFFF !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="input"]:focus-within,
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="base-input"]:focus-within,
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="textarea"]:focus-within,
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-baseweb="select"] > div:focus-within {
border-color: #222222 !important;
box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.08) !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) .stButton > button {
border-radius: 10px !important;
min-height: 44px !important;
}
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) div[role="dialog"] {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) [data-baseweb="input"],
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) [data-baseweb="base-input"] {
border-radius: 8px !important;
min-height: 42px !important;
border-color: #CBD5E1 !important;
}
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) [data-baseweb="input"]:focus-within,
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) [data-baseweb="base-input"]:focus-within {
border-color: #0284C7 !important;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}
div[data-testid="stDialog"]:has(.yf-modern-auth-modal) .stButton > button {
border-radius: 8px !important;
min-height: 42px !important;
}
.yf-portal-top-shell {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0px !important;
padding-top: 0px !important;
margin-bottom: 14px;
background: #FFFFFF;
box-sizing: border-box;
}
.yf-portal-header-outer {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 54px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid #E2E8F0;
z-index: 99990;
box-sizing: border-box;
display: flex;
align-items: center;
margin: 0 !important;
}
.yf-header-spacer {
width: 100%;
height: 54px;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0;
display: block;
}
.yf-portal-header {
position: relative;
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 2.25rem;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 8px;
box-sizing: border-box;
}
.yf-header-left-wrap {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px;
flex-wrap: nowrap !important;
min-width: 0;
flex-shrink: 1;
}
.yf-portal-header-updated {
position: absolute;
right: 16px;
bottom: 7px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.84);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.03em;
white-space: nowrap !important;
background: transparent;
border: none;
padding: 0;
text-shadow: 0 1px 4px rgba(12, 22, 38, 0.78);
pointer-events: auto;
}
.yf-header-right-wrap {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 8px;
flex-shrink: 0;
}
.yf-header-glogin-btn {
display: inline-flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 5px;
background: #FFFFFF;
border: 1px solid #CBD5E1;
color: #475569;
font-size: 11.5px;
font-weight: 500;
padding: 5px 11px;
border-radius: 4px;
cursor: pointer;
user-select: none;
box-shadow: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap !important;
flex-shrink: 0;
}
.yf-header-glogin-btn:hover {
background: #F8FAFC;
border-color: #94A3B8;
color: #0F172A;
box-shadow: none;
}
.yf-header-subtle-link {
display: inline-flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 4px;
background: transparent;
border: none;
color: #6A6A6A;
font-size: 11px;
font-weight: 500;
padding: 4px 6px;
cursor: pointer;
user-select: none;
text-decoration: none !important;
transition: color 0.15s ease, opacity 0.15s ease;
white-space: nowrap !important;
flex-shrink: 0;
opacity: 0.85;
}
.yf-header-subtle-link:hover {
color: #222222;
opacity: 1.0;
}
.yf-header-glogin-btn.is-authed {
background: #FFFFFF;
border: 1px solid #CBD5E1;
color: #1E293B;
max-width: 320px;
padding: 4px 10px 4px 6px;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
}
.yf-header-glogin-btn.is-authed:hover {
background: #F8FAFC;
border-color: #94A3B8;
color: #0F172A;
}
.yf-g-acct-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #0284C7;
color: #FFFFFF;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.yf-g-acct-email {
font-size: 11.5px;
font-weight: 600;
color: #1E293B;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 分析ページの切り口タブ（stTabs）をシンプルで直感的なデザインに統一 */
div[data-testid="stTabs"] [data-baseweb="tab-list"] {
gap: 4px !important;
border-bottom: 2px solid #E2E8F0 !important;
padding-bottom: 0px !important;
margin-bottom: 10px !important;
}
div[data-testid="stTabs"] button[data-baseweb="tab"] {
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #475569 !important;
background: #F8FAFC !important;
border: 1px solid #E2E8F0 !important;
border-bottom: none !important;
border-radius: 4px 4px 0 0 !important;
margin: 0 !important;
}
div[data-testid="stTabs"] button[data-baseweb="tab"][aria-selected="true"] {
color: #0369A1 !important;
background: #FFFFFF !important;
border-color: #CBD5E1 !important;
border-top: 2.5px solid #0284C7 !important;
font-weight: 800 !important;
}
/* フルワイド・ヒーロービュー（全タブで同一高さ・スクロール時は自然に上へ流れる） */
.yf-hero-fullbleed,
.yf-hero-fullbleed.is-subpage {
position: relative;
width: 100%;
height: 216px !important;
min-height: 216px !important;
max-height: 216px !important;
margin-top: 0px !important;
background: #0F172A;
overflow: hidden;
}
.yf-hero-fullbleed img.yf-hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 49%;
display: block;
}
.yf-hero-overlay-grad {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.0) 0%, rgba(15, 23, 42, 0.02) 54%, rgba(12, 22, 38, 0.48) 100%);
}
.yf-hero-inner-content {
position: absolute;
inset: 0;
max-width: 1480px;
margin: 0 auto;
padding: 0 2.25rem 14px 2.25rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
box-sizing: border-box;
}
.yf-hero-lockup {
position: relative;
padding-left: 2px;
max-width: 760px;
}
.yf-hero-meta-pill {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
padding: 3px 12px;
font-family: 'Plus Jakarta Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
font-size: 11px;
color: rgba(255, 255, 255, 0.94);
font-weight: 400;
letter-spacing: 0.06em;
margin-top: 7px;
}
.yf-hero-meta-sep {
color: rgba(255, 255, 255, 0.45);
font-weight: 300;
font-size: 10px;
}
/* ==========================================================
ヒーローキャッチコピー：【① 活版・双柱罫（昭和活版・大小混植＆L字コーナーブラケット）】
========================================================== */
.yf-hpat-1 {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
padding: 5px 2px 6px 2px;
border-top: 2.5px double rgba(255, 255, 255, 0.78);
border-bottom: 2.5px double rgba(255, 255, 255, 0.78);
}
.yf-hpat-1-body {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
font-family: 'Shippori Mincho', 'Kaisei Decol', serif;
font-size: 21px;
font-weight: 700;
color: #FAF8F5;
letter-spacing: 0.14em;
line-height: 1.35;
text-shadow: 0 2px 10px rgba(10, 18, 32, 0.78);
}
.yf-hpat-1-body .hp1-lead {
font-size: 1.04em;
font-weight: 800;
}
.yf-hpat-1-body .hp1-pt {
font-size: 0.68em;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin: 0 4px;
transform: translateY(-2px);
display: inline-block;
}
.yf-hpat-1-body .hp1-kw {
position: relative;
display: inline-flex;
align-items: center;
font-size: 1.08em;
font-weight: 800;
color: #FFFFFF;
padding: 1px 8px 2px 8px;
margin: 0 2px;
}
.yf-hpat-1-body .hp1-kw::before,
.yf-hpat-1-body .hp1-kw::after {
content: "";
position: absolute;
width: 7px;
height: 9px;
border-color: rgba(255, 255, 255, 0.88);
border-style: solid;
pointer-events: none;
}
.yf-hpat-1-body .hp1-kw::before {
top: 1px;
left: 0;
border-width: 1.5px 0 0 1.5px;
}
.yf-hpat-1-body .hp1-kw::after {
bottom: 1px;
right: 0;
border-width: 0 1.5px 1.5px 0;
}
/* Google公式4色Gアイコン付きモダン「Googleでログイン」ボタン */
div[class*="st-key-g_signin_btn_"] .stButton > button,
div[class*="st-key-g_signin_btn_"] button[data-testid*="stBaseButton"],
div[class*="st-key-g_acct_btn_"] .stButton > button,
div[class*="st-key-g_acct_btn_"] button[data-testid*="stBaseButton"] {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
color: #1F1F1F !important;
border: 1px solid #DADCE0 !important;
border-radius: 6px !important;
min-height: 44px !important;
padding: 8px 16px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
div[class*="st-key-g_signin_btn_"] .stButton > button p,
div[class*="st-key-g_signin_btn_"] .stButton > button span,
div[class*="st-key-g_acct_btn_"] .stButton > button p,
div[class*="st-key-g_acct_btn_"] .stButton > button span {
color: #1F1F1F !important;
font-size: 14px !important;
font-weight: 600 !important;
}
div[class*="st-key-g_signin_btn_"] .stButton > button:hover,
div[class*="st-key-g_signin_btn_"] button[data-testid*="stBaseButton"]:hover,
div[class*="st-key-g_acct_btn_"] .stButton > button:hover,
div[class*="st-key-g_acct_btn_"] button[data-testid*="stBaseButton"]:hover {
background: #F8FAFD !important;
background-color: #F8FAFD !important;
border-color: #D2E3FC !important;
color: #174EA6 !important;
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.16) !important;
}
div[class*="st-key-g_signin_btn_"] .stButton > button:hover p,
div[class*="st-key-g_signin_btn_"] .stButton > button:hover span,
div[class*="st-key-g_acct_btn_"] .stButton > button:hover p,
div[class*="st-key-g_acct_btn_"] .stButton > button:hover span {
color: #174EA6 !important;
}
div[class*="st-key-g_signin_btn_"] .stButton > button::before,
div[class*="st-key-g_signin_btn_"] button[data-testid*="stBaseButton"]::before,
div[class*="st-key-g_acct_btn_"] .stButton > button::before,
div[class*="st-key-g_acct_btn_"] button[data-testid*="stBaseButton"]::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z' fill='%23EA4335'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
/* ==========================================================
Airbnb-Inspired Global Light UI Design System (All Tabs)
========================================================== */
.yf-card {
background: #FFFFFF !important;
border: 1px solid #EBEBEB !important;
border-radius: 16px !important;
padding: 16px 18px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}
.yf-card:hover {
background: #FFFFFF !important;
border-color: #DDDDDD !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}
.yf-card-label {
font-size: 12px;
font-weight: 600;
color: #6A6A6A;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.yf-card-val {
font-size: 19px;
font-weight: 800;
color: #222222;
font-variant-numeric: tabular-nums;
line-height: 1.25;
letter-spacing: -0.02em;
}
.yf-card-sub {
font-size: 11.5px;
color: #6A6A6A;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.yf-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.yf-split-2 {
display: grid;
grid-template-columns: 0.46fr 0.54fr;
gap: 20px;
background: #FFFFFF;
border: 1px solid #EBEBEB !important;
border-radius: 20px !important;
padding: 20px 22px !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}
.yf-split-left {
padding-right: 18px;
border-right: 1px solid #EBEBEB;
display: flex;
flex-direction: column;
}
.yf-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* セクション見出し：Airbnb風のすっきりとしたモダンタイポグラフィ */
.cf-sec-header, .sec-title {
position: static !important;
top: auto !important;
border: none !important;
border-radius: 0px !important;
background: transparent !important;
padding: 4px 0 4px 0 !important;
margin-top: 22px !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.cf-sec-title-text, .sec-title > span:first-child {
color: #222222 !important;
font-size: 19px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif !important;
}
/* 全タブ共通のカード群（12エリアカード・読み物カード・KPIカード・ニュース行・バナー） */
.portal-area-cards-grid-2col {
gap: 14px !important;
}
.portal-area-cards-grid-2col .portal-area-card,
.portal-area-card {
background: #FFFFFF !important;
border: 1px solid #EBEBEB !important;
border-top: 1px solid #EBEBEB !important;
border-radius: 18px !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
overflow: hidden !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.portal-area-cards-grid-2col .portal-area-card:hover,
.portal-area-card:hover {
background: #FFFFFF !important;
border-color: #DDDDDD !important;
border-top-color: #DDDDDD !important;
transform: translateY(-3px) !important;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10) !important;
}
.portal-area-card-head {
background: #FFFFFF !important;
border-bottom: 1px solid #F0F0F0 !important;
padding: 12px 16px 10px 16px !important;
}
.portal-area-card-body {
background: #FFFFFF !important;
padding: 10px 16px 14px 16px !important;
}
.portal-area-kpi-strip {
border-bottom: 1px solid #F0F0F0 !important;
padding-bottom: 8px !important;
margin-bottom: 8px !important;
}
.portal-area-kpi-cell:first-child {
border-right: 1px solid #F0F0F0 !important;
}
.portal-area-hotels-strip {
border-bottom: 1px solid #F0F0F0 !important;
padding: 6px 0 !important;
}
.portal-hotel-chip {
border-radius: 999px !important;
background: #F7F7F7 !important;
border: 1px solid #EBEBEB !important;
padding: 2px 9px !important;
color: #222222 !important;
}
.portal-hotel-chip.is-soldout {
background: #FFF1F2 !important;
border-color: #FECDD3 !important;
color: #BE123C !important;
}
.portal-hotel-chip.is-soldout .portal-hotel-chip-name,
.portal-hotel-chip.is-soldout .portal-hotel-chip-badge {
color: #BE123C !important;
}
.portal-reading-card,
.portal-digest-box,
.yahoo-topics-card,
.ai-dialog-report,
.kpi-card {
background: #FFFFFF !important;
border: 1px solid #EBEBEB !important;
border-top: 1px solid #EBEBEB !important;
border-radius: 18px !important;
padding: 18px 20px !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}
.portal-reading-card:hover,
.kpi-card:hover {
border-color: #DDDDDD !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09) !important;
}
.portal-news-row {
background: #FFFFFF !important;
border: 1px solid #EBEBEB !important;
border-radius: 14px !important;
padding: 14px 16px !important;
margin-bottom: 10px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.portal-news-row:hover {
border-color: #DDDDDD !important;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07) !important;
}
.nav-parent-banner,
.wp-rank-ticker-bar,
.wp-master-left-map-hdr,
.drill-expand-box {
background: #FFFFFF !important;
border: 1px solid #EBEBEB !important;
border-top: 1px solid #EBEBEB !important;
border-radius: 14px !important;
padding: 10px 16px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.wp-rank-ticker-title {
background: #222222 !important;
color: #FFFFFF !important;
border-radius: 999px !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
margin-right: 10px !important;
}
.wp-map-area-chip {
border-radius: 999px !important;
background: #F7F7F7 !important;
border: 1px solid #EBEBEB !important;
padding: 3px 10px !important;
transition: all 0.15s ease !important;
}
.wp-map-area-chip:hover,
.wp-map-area-chip.is-active {
background: #222222 !important;
color: #FFFFFF !important;
border-color: #222222 !important;
}
.wp-map-area-chip:hover span,
.wp-map-area-chip.is-active span {
color: #FFFFFF !important;
}
.tag-today, .tag-holiday, .tag-target, .badge-so, .badge-busy, .badge-calm, .mdl-picked-pill, .mdl-add-btn {
border-radius: 999px !important;
padding: 2px 9px !important;
}
.portal-footer-wrap {
position: relative !important;
top: auto !important;
bottom: auto !important;
z-index: 1 !important;
clear: both !important;
width: 100% !important;
box-sizing: border-box !important;
margin-top: 48px !important;
border-top: 1px solid #EBEBEB !important;
border-image: none !important;
background: #F7F7F7 !important;
padding: 32px 20px 24px 20px !important;
border-radius: 24px 24px 0 0 !important;
}
.portal-footer-col-title {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #222222 !important;
border-left: 3px solid #E31C5F !important;
padding-left: 8px !important;
}
.portal-article-headline-link {
color: #222222 !important;
transition: color 0.15s ease !important;
}
.portal-article-headline-link:hover {
color: #E31C5F !important;
border-bottom-color: #E31C5F !important;
}
/* Google公式風 アカウント選択カード（ネイティブst.button完全対応版） */
.yf-g-chooser-header-card {
background: #FFFFFF;
border: 1px solid #DADCE0;
border-bottom: none;
border-radius: 10px 10px 0 0 !important;
overflow: hidden;
margin-bottom: -14px;
}
.yf-g-chooser-topbar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid #E8EAED;
font-size: 12.5px;
font-weight: 600;
color: #5F6368;
background: #FFFFFF;
}
.yf-g-chooser-heading {
padding: 14px 18px 10px 18px;
text-align: center;
background: #FFFFFF;
}
.yf-g-chooser-title {
font-size: 17px;
font-weight: 700;
color: #202124;
letter-spacing: -0.01em;
line-height: 1.3;
}
.yf-g-chooser-sub {
font-size: 12px;
color: #5F6368;
margin-top: 3px;
}
.yf-g-chooser-sub b {
color: #1A73E8;
font-weight: 700;
}
div[class*="st-key-g_acct_row_btn_"],
div[class*="st-key-g_other_row_btn_"] {
margin-top: 0 !important;
margin-bottom: -14px !important;
}
div[class*="st-key-g_acct_row_btn_"] .stButton > button,
div[class*="st-key-g_acct_row_btn_"] button[data-testid*="stBaseButton"],
div[class*="st-key-g_other_row_btn_"] .stButton > button,
div[class*="st-key-g_other_row_btn_"] button[data-testid*="stBaseButton"] {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
border: 1px solid #DADCE0 !important;
border-top: 1px solid #E8EAED !important;
border-radius: 0 !important;
padding: 11px 16px !important;
min-height: 58px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
text-align: left !important;
box-shadow: none !important;
transition: background-color 0.14s ease !important;
}
div[class*="st-key-g_acct_row_btn_"] .stButton > button:hover,
div[class*="st-key-g_acct_row_btn_"] button[data-testid*="stBaseButton"]:hover,
div[class*="st-key-g_other_row_btn_"] .stButton > button:hover,
div[class*="st-key-g_other_row_btn_"] button[data-testid*="stBaseButton"]:hover {
background: #F8FAFD !important;
background-color: #F8FAFD !important;
border-color: #DADCE0 !important;
}
div[class*="st-key-g_acct_row_btn_"] .stButton > button [data-testid="stMarkdownContainer"],
div[class*="st-key-g_other_row_btn_"] .stButton > button [data-testid="stMarkdownContainer"] {
flex: 1 !important;
text-align: left !important;
}
div[class*="st-key-g_acct_row_btn_"] .stButton > button p {
margin: 0 !important;
line-height: 1.35 !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #5F6368 !important;
text-align: left !important;
}
div[class*="st-key-g_acct_row_btn_"] .stButton > button p strong {
display: block !important;
font-size: 13.5px !important;
font-weight: 700 !important;
color: #202124 !important;
margin-bottom: 1px !important;
}
div[class*="st-key-g_other_row_btn_"] .stButton > button p {
margin: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #202124 !important;
text-align: left !important;
}
/* アカウント行の左側：丸型アバター（S）＋右下のGoogle 4色Gバッジ複合SVG */
div[class*="st-key-g_acct_row_btn_"] .stButton > button::before,
div[class*="st-key-g_acct_row_btn_"] button[data-testid*="stBaseButton"]::before {
content: "" !important;
display: inline-block !important;
width: 40px !important;
height: 38px !important;
flex-shrink: 0 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38' width='40' height='38'%3E%3Ccircle cx='18' cy='18' r='17' fill='%230284C7'/%3E%3Ctext x='18' y='23.5' text-anchor='middle' fill='%23FFFFFF' font-family='sans-serif' font-size='15' font-weight='700'%3ES%3C/text%3E%3Ccircle cx='30.5' cy='29.5' r='8' fill='%23FFFFFF' stroke='%23DADCE0' stroke-width='1'/%3E%3Cg transform='translate(24.5, 23.5) scale(0.5)'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z' fill='%23EA4335'/%3E%3C/g%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
/* 「別のアカウントを使用」行の左側：人物＋アイコンSVG */
div[class*="st-key-g_other_row_btn_"] .stButton > button::before,
div[class*="st-key-g_other_row_btn_"] button[data-testid*="stBaseButton"]::before {
content: "" !important;
display: inline-block !important;
width: 36px !important;
height: 36px !important;
flex-shrink: 0 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='17' fill='%23F1F3F4'/%3E%3Cg transform='translate(7, 7) scale(0.9)' fill='none' stroke='%235F6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/g%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
div[class*="st-key-g_acct_row_btn_"] .stButton > button::after,
div[class*="st-key-g_other_row_btn_"] .stButton > button::after {
content: "›" !important;
margin-left: auto !important;
font-size: 18px !important;
color: #9AA0A6 !important;
font-weight: 400 !important;
}
div[class*="st-key-g_other_row_btn_"] {
margin-bottom: 6px !important;
}
div[class*="st-key-g_other_row_btn_"] .stButton > button,
div[class*="st-key-g_other_row_btn_"] button[data-testid*="stBaseButton"] {
border-radius: 0 0 10px 10px !important;
}
/* ボタン・ピル・入力コントロール：Airbnb風の角丸＆コーラルピンク・モノトーンで統一 */
.stButton > button[kind="primary"] {
background: linear-gradient(90deg, #E61E4D 0%, #E31C5F 50%, #D70466 100%) !important;
border: none !important;
color: #FFFFFF !important;
border-radius: 10px !important;
font-weight: 700 !important;
box-shadow: 0 4px 14px rgba(227, 28, 95, 0.25) !important;
transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}
.stButton > button[kind="primary"]:hover {
background: linear-gradient(90deg, #D70466 0%, #BD1E59 100%) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(227, 28, 95, 0.34) !important;
}
.stButton > button[kind="secondary"] {
background-color: #FFFFFF !important;
border: 1px solid #DDDDDD !important;
color: #222222 !important;
border-radius: 10px !important;
font-weight: 600 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
transition: all 0.14s ease !important;
}
.stButton > button[kind="secondary"]:hover {
border-color: #222222 !important;
color: #222222 !important;
background-color: #F7F7F7 !important;
}
div[data-testid="stSegmentedControl"] button,
div[data-testid="stPills"] button,
div[data-testid="stButtonGroup"] button {
border-radius: 999px !important;
border: 1px solid #DDDDDD !important;
background: #FFFFFF !important;
color: #222222 !important;
font-weight: 600 !important;
padding: 6px 14px !important;
transition: all 0.15s ease !important;
}
div[data-testid="stSegmentedControl"] button:hover,
div[data-testid="stPills"] button:hover,
div[data-testid="stButtonGroup"] button:hover {
border-color: #222222 !important;
background: #F7F7F7 !important;
}
div[data-testid="stSegmentedControl"] button[aria-checked="true"],
div[data-testid="stSegmentedControl"] button[aria-pressed="true"],
div[data-testid="stSegmentedControl"] button[kind$="Active"],
div[data-testid="stPills"] button[aria-checked="true"],
div[data-testid="stPills"] button[aria-pressed="true"],
div[data-testid="stPills"] button[kind$="Active"],
div[data-testid="stButtonGroup"] button[aria-checked="true"],
div[data-testid="stButtonGroup"] button[aria-pressed="true"],
div[data-testid="stButtonGroup"] button[kind$="Active"] {
background: #222222 !important;
color: #FFFFFF !important;
border-color: #222222 !important;
}
div[data-testid="stSegmentedControl"] button[aria-checked="true"] p,
div[data-testid="stSegmentedControl"] button[aria-pressed="true"] p,
div[data-testid="stSegmentedControl"] button[kind$="Active"] p,
div[data-testid="stPills"] button[aria-checked="true"] p,
div[data-testid="stPills"] button[aria-pressed="true"] p,
div[data-testid="stPills"] button[kind$="Active"] p,
div[data-testid="stButtonGroup"] button[aria-checked="true"] p,
div[data-testid="stButtonGroup"] button[aria-pressed="true"] p,
div[data-testid="stButtonGroup"] button[kind$="Active"] p {
color: #FFFFFF !important;
}
div[data-baseweb="input"],
div[data-baseweb="base-input"] {
border-radius: 12px !important;
border-color: #DDDDDD !important;
}
.st-key-act_open_settings_btn .stButton > button[kind="secondary"],
.st-key-act_empty_open_settings_btn .stButton > button[kind="secondary"],
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button[kind="secondary"],
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button[kind="secondary"],
div[class*="st-key-t1_open_logic_btn_"] .stButton > button[kind="secondary"],
.st-key-act_open_settings_btn .stButton > button[kind="secondary"]:hover,
.st-key-act_empty_open_settings_btn .stButton > button[kind="secondary"]:hover,
div[class*="st-key-t1_mdl_help_btn_"] .stButton > button[kind="secondary"]:hover,
div[class*="st-key-t1_sim_tbl_help_btn_"] .stButton > button[kind="secondary"]:hover,
div[class*="st-key-t1_open_logic_btn_"] .stButton > button[kind="secondary"]:hover {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
border-radius: 0px !important;
box-shadow: none !important;
}
.portal-area-jump-pill, .drill-trigger-link, .portal-report-detail-btn {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
color: #222222 !important;
background: #F7F7F7 !important;
border: 1px solid #DDDDDD !important;
border-radius: 999px !important;
padding: 4px 12px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.15s ease !important;
}
.portal-area-jump-pill:hover, .drill-trigger-link:hover, .portal-report-detail-btn:hover {
color: #FFFFFF !important;
background: #222222 !important;
border-color: #222222 !important;
}
/* ヒーロービュー直下 グローバルナビタブバー：Airbnb風のすっきりとしたタブナビゲーション */
.yf-tabs-sticky-slot {
width: 100%;
min-height: 46px;
background: #FFFFFF;
border-bottom: 1px solid #EBEBEB;
box-sizing: border-box;
}
.yf-tabs-container {
width: 100%;
margin: 0;
border: none;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid #EBEBEB;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
}
.yf-tabs-container.is-pinned {
position: fixed !important;
top: 54px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99985 !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}
.yf-news-tabbar {
max-width: 1480px;
margin: 0 auto;
padding: 0 2.25rem !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
background: transparent !important;
border-bottom: none !important;
border-top: none !important;
gap: 6px !important;
scrollbar-width: none;
box-sizing: border-box;
}
.yf-news-tabbar::-webkit-scrollbar {
display: none;
}
.yf-news-tab {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
white-space: nowrap !important;
padding: 11px 18px 11px 18px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: #6A6A6A !important;
background: transparent !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 2.5px solid transparent !important;
cursor: pointer !important;
text-align: center !important;
user-select: none !important;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}
.yf-news-tab .yf-gnav-svg {
flex-shrink: 0;
color: #6A6A6A;
transition: color 0.15s ease, transform 0.15s ease;
}
.yf-news-tab:last-child {
border-right: none !important;
}
.yf-news-tab:hover {
background: #F7F7F7 !important;
color: #222222 !important;
border-radius: 10px 10px 0 0 !important;
}
.yf-news-tab:hover .yf-gnav-svg {
color: #222222 !important;
transform: translateY(-1px);
}
.yf-news-tab.is-active {
background: transparent !important;
color: #222222 !important;
font-weight: 800 !important;
border-bottom: 2.5px solid #E31C5F !important;
box-shadow: none !important;
}
.yf-news-tab.is-active .yf-gnav-svg {
color: #E31C5F !important;
}
.yf-hero-pat-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
background: rgba(15, 23, 42, 0.48);
border: 1px solid rgba(255, 255, 255, 0.24);
cursor: pointer;
user-select: none;
backdrop-filter: blur(4px);
transition: all 0.15s ease;
}
.yf-hero-pat-pill:hover {
background: rgba(255, 255, 255, 0.28);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
.yf-hero-pat-pill.is-active {
background: #FFFFFF;
color: #222222;
font-weight: 800;
border-color: #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.yf-news-panel {
padding: 14px 4px 14px 4px;
background: transparent;
}
.yf-news-subhdr {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #EBEBEB;
font-size: 12px;
color: #6A6A6A;
font-weight: 600;
}
.yf-more-link-btn {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 12px;
padding: 11px 16px;
background: #FFFFFF;
border: 1px solid #222222;
border-radius: 12px;
color: #222222 !important;
font-size: 13px;
font-weight: 700;
text-align: center;
cursor: pointer;
text-decoration: none !important;
transition: all 0.15s ease;
}
.yf-more-link-btn:hover {
background: #F7F7F7;
border-color: #222222;
color: #222222 !important;
}
/* スマホ表示（768px以下）完全対応レスポンシブ設計（1行ヘッダー維持・フルワイドヒーロー・全6タブ一括表示） */
@media (max-width: 768px) {
html,
body,
.stApp,
[data-testid="stAppViewContainer"],
[data-testid="stMain"] {
padding-left: 0rem !important;
padding-right: 0rem !important;
padding-top: 0rem !important;
margin-top: 0rem !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.block-container,
[data-testid="stMainBlockContainer"],
[data-testid="stAppViewBlockContainer"] {
padding-left: 0.65rem !important;
padding-right: 0.65rem !important;
padding-top: 0rem !important;
margin-top: 0rem !important;
max-width: 100vw !important;
overflow-x: visible !important;
}
.yf-portal-top-shell {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0px !important;
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
margin-bottom: 10px;
}
.yf-portal-header-outer {
height: 46px !important;
}
.yf-header-spacer {
height: 46px !important;
}
.yf-portal-header {
padding: 0 10px !important;
gap: 6px !important;
height: 46px !important;
flex-wrap: nowrap !important;
}
.yf-header-left-wrap {
flex-wrap: nowrap !important;
}
.yf-header-left-wrap .portal-logo-group {
transform: scale(0.74);
transform-origin: left center;
margin-right: -50px;
flex-wrap: nowrap !important;
}
.yf-portal-header-updated {
right: 10px !important;
bottom: 4px !important;
font-size: 9.5px !important;
padding: 0 !important;
white-space: nowrap !important;
}
.yf-header-right-wrap {
gap: 5px !important;
flex-wrap: nowrap !important;
}
.yf-header-glogin-btn {
font-size: 11px !important;
padding: 4px 9px !important;
gap: 4px !important;
border-radius: 4px !important;
white-space: nowrap !important;
}
.yf-header-glogin-btn.is-authed {
max-width: 175px !important;
}
.yf-hero-fullbleed,
.yf-hero-fullbleed.is-subpage {
height: 156px !important;
min-height: 156px !important;
max-height: 156px !important;
margin-top: 0px !important;
}
.yf-hero-inner-content {
padding: 0 12px 20px 12px !important;
}
.yf-hero-lockup {
padding-left: 0px !important;
}
.yf-hero-meta-pill {
font-size: 9.5px !important;
padding: 2px 9px !important;
gap: 5px !important;
margin-top: 5px !important;
letter-spacing: 0.03em !important;
}
.yf-hero-pat-switcher {
top: 6px !important;
left: 8px !important;
right: 8px !important;
padding: 2px 5px !important;
gap: 3px !important;
}
.yf-hero-pat-sw-lbl {
font-size: 9px !important;
}
.yf-hero-pat-btn {
font-size: 9.5px !important;
padding: 2px 5px !important;
}
.yf-hero-catch-title,
.yf-hpat-1-body,
.yf-hpat-2-main,
.yf-hpat-3,
.yf-hpat-5-inner {
font-size: 14.5px !important;
line-height: 1.35 !important;
letter-spacing: 0.06em !important;
}
.yf-hpat-4-main .hp4-big,
.yf-hpat-4-main .hp4-kw {
font-size: 15.5px !important;
}
.yf-hpat-1-seal {
width: 20px !important;
height: 32px !important;
font-size: 9px !important;
}
.yf-tabs-sticky-slot {
min-height: 58px !important;
}
.yf-tabs-container.is-pinned {
top: 46px !important;
}
/* 1. 上部グローバルナビ（旧ボタン型がある場合） */
div[data-testid="stHorizontalBlock"]:has([class*="st-key-gnav_btn_"]) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
div[data-testid="stHorizontalBlock"]:has([class*="st-key-gnav_btn_"]) > div[data-testid="stColumn"] {
flex: 1 1 calc(33.333% - 4px) !important;
min-width: calc(33.333% - 4px) !important;
max-width: calc(33.333% - 4px) !important;
width: calc(33.333% - 4px) !important;
}
div[data-testid="stHorizontalBlock"]:has([class*="st-key-gnav_btn_"]) .stButton > button {
padding: 6px 2px !important;
font-size: 11.5px !important;
min-height: 36px !important;
}
/* 2. グローバルナビ以外のすべての st.columns（2列・3列・4列等）を無理な横並びにせず1列（100%幅）で縦積み */
div[data-testid="stHorizontalBlock"]:not(:has([class*="st-key-gnav_btn_"])) {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
div[data-testid="stHorizontalBlock"]:not(:has([class*="st-key-gnav_btn_"])) > div[data-testid="stColumn"] {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
}
/* 分析室：最内層の「店舗選択＋設定ボタン」行および「モデル選択＋？ボタン」行のみスマホでも1行横並びを維持 */
div[data-testid="stHorizontalBlock"]:not(:has([data-testid="stHorizontalBlock"])):has(.st-key-act_open_settings_btn),
div[data-testid="stHorizontalBlock"]:not(:has([data-testid="stHorizontalBlock"])):has([class*="st-key-t1_mdl_help_btn_"]) {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
}
div[data-testid="stHorizontalBlock"]:not(:has([data-testid="stHorizontalBlock"])):has(.st-key-act_open_settings_btn) > div[data-testid="stColumn"]:first-child,
div[data-testid="stHorizontalBlock"]:not(:has([data-testid="stHorizontalBlock"])):has([class*="st-key-t1_mdl_help_btn_"]) > div[data-testid="stColumn"]:first-child {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
div[data-testid="stHorizontalBlock"]:not(:has([data-testid="stHorizontalBlock"])):has(.st-key-act_open_settings_btn) > div[data-testid="stColumn"]:last-child {
flex: 0 0 78px !important;
width: 78px !important;
min-width: 78px !important;
max-width: 78px !important;
}
div[data-testid="stHorizontalBlock"]:not(:has([data-testid="stHorizontalBlock"])):has([class*="st-key-t1_mdl_help_btn_"]) > div[data-testid="stColumn"]:last-child {
flex: 0 0 42px !important;
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
}
/* 3. CSS Grid（2列・3列・インラインgrid）をスマホでは最適化（.ar-grid4は2×2グリッドで縦スクロール半減） */
.ar-grid3,
.act-sub-summary-grid,
.act-core-conclusions-grid,
.yf-kpi-grid,
.yf-split-2,
.yf-grid-3,
.portal-area-cards-grid-2col,
.portal-footer-grid,
div[style*="grid-template-columns"]:not(.em-cal-dow-grid):not(.em-cal-days-grid) {
grid-template-columns: 1fr !important;
gap: 10px !important;
height: auto !important;
max-height: none !important;
}
.ar-grid4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
height: auto !important;
max-height: none !important;
}
.ar-grid5 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px 10px !important;
height: auto !important;
max-height: none !important;
}
.portal-area-cards-grid-2col .portal-area-card,
.portal-area-card {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.yf-split-left {
padding-right: 0 !important;
border-right: none !important;
border-bottom: 1px solid #E2E8F0 !important;
padding-bottom: 12px !important;
}
/* 4. ボタン・セグメントコントロール・ピル・ラベルの nowrap を解除し、文字見切れを防止 */
.stButton > button,
.stButton > button p,
.stButton > button span,
div[data-testid="stSegmentedControl"] button,
div[data-testid="stSegmentedControl"] span,
div[data-testid="stSegmentedControl"] p,
div[data-testid="stPills"] button,
div[data-testid="stPills"] span,
div[data-testid="stPills"] p,
div[role="radiogroup"] label,
div[role="radiogroup"] p,
div[data-testid="stWidgetLabel"] p {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
text-overflow: clip !important;
overflow: visible !important;
height: auto !important;
line-height: 1.3 !important;
}
.stButton > button {
font-size: 12px !important;
padding: 7px 10px !important;
min-height: 38px !important;
}
div[data-testid="stSegmentedControl"],
div[data-testid="stSegmentedControl"] div,
div[data-testid="stSegmentedControl"] [data-baseweb="button-group"],
div[data-testid="stPills"],
div[data-testid="stPills"] div,
div[data-testid="stPills"] [data-baseweb="button-group"] {
flex-wrap: wrap !important;
overflow-x: visible !important;
gap: 4px !important;
row-gap: 5px !important;
}
div[data-testid="stButtonGroup"] button[data-variant="segmented_control"],
div[data-testid="stButtonGroup"] button,
div[data-testid="stSegmentedControl"] button,
div[data-testid="stPills"] button {
font-size: 11.5px !important;
padding: 5px 8px !important;
min-height: 34px !important;
height: auto !important;
}
/* 分析室4タブ（需要予測／混む日の法則／グラフで確かめる／売上をつける）：スマホ時も角丸入れ子ゼロの単層フラットバー */
div[class*="st-key-ar_subtab_nav"],
div[class*="st-key-act_subtab_mode_"],
div[class*="st-key-act_subtab_mode_"] > div,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stSegmentedControl"],
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"]:has(.react-aria-ToggleButtonGroup) {
background: transparent !important;
border: none !important;
border-radius: 0px !important;
padding: 0px !important;
margin: 0px !important;
box-shadow: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] .react-aria-ToggleButtonGroup,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"].cf-st-btngroup,
div[class*="st-key-act_subtab_mode_"] [role="radiogroup"],
div[class*="st-key-act_subtab_mode_"] [data-baseweb="button-group"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0px !important;
column-gap: 0px !important;
row-gap: 0px !important;
width: 100% !important;
max-width: 100% !important;
background: #FAF9F6 !important;
border: 1px solid #E5E2DC !important;
border-bottom: 1.5px solid #1C1917 !important;
border-radius: 0px !important;
padding: 0px !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button[data-variant="segmented_control"],
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stSegmentedControl"] button,
div[class*="st-key-act_subtab_mode_"] button {
flex: 1 1 0% !important;
width: 25% !important;
min-width: 0 !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
height: 44px !important;
max-height: none !important;
padding: 4px 2px 3px 2px !important;
gap: 2px !important;
border-radius: 0px !important;
border: none !important;
border-right: 1px solid #E5E2DC !important;
white-space: nowrap !important;
overflow: visible !important;
box-shadow: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button:last-of-type,
div[class*="st-key-act_subtab_mode_"] button:last-of-type {
border-right: none !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button::before,
div[class*="st-key-act_subtab_mode_"] button::before {
margin-right: 0px !important;
margin-bottom: 1px !important;
width: 14px !important;
height: 14px !important;
}
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button p,
div[class*="st-key-act_subtab_mode_"] div[data-testid="stButtonGroup"] button span,
div[class*="st-key-act_subtab_mode_"] button p,
div[class*="st-key-act_subtab_mode_"] button span {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
font-size: 10.5px !important;
line-height: 1.15 !important;
letter-spacing: -0.03em !important;
}
.ag-spot-btn,
.sec-title .ag-spot-btn,
.ar-head .ag-spot-btn,
.ar-label .ag-spot-btn,
.ar-hero .ag-spot-btn,
.ar-hint .ag-spot-btn {
font-size: 11.5px !important;
padding: 4px 10px !important;
gap: 4px !important;
}
/* 5. 見出し・カード・インライン要素の ellipsis / nowrap 見切れを解除（ヘッダー・ロゴは1行維持） */
.cf-sec-header,
.cf-sec-title-group,
.cf-sec-title-text,
.sec-title,
.sec-title > span:first-child,
.wp-master-left-map-hdr,
.nav-parent-banner,
.nav-parent-main,
.nav-parent-sub,
.yf-card-sub,
.kpi-card,
.kpi-label,
.kpi-main,
.kpi-sub,
.portal-area-card-head,
.portal-area-card-head span,
.portal-area-kpi-lbl,
.portal-area-kpi-val,
.portal-hotel-chip,
.portal-article-headline-link {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex-wrap: wrap !important;
}
.wp-master-left-map-hdr {
padding: 6px 8px !important;
line-height: 1.35 !important;
}
.cf-sec-title-text, .sec-title > span:first-child {
font-size: 14px !important;
line-height: 1.35 !important;
}
.stMarkdown [style*="white-space:nowrap"]:not(.yf-portal-header-updated):not(.yf-header-glogin-btn),
.stMarkdown [style*="white-space: nowrap"]:not(.yf-portal-header-updated):not(.yf-header-glogin-btn),
.stMarkdown [style*="text-overflow:ellipsis"],
.stMarkdown [style*="text-overflow: ellipsis"] {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
height: auto !important;
}
.stMarkdown div[style*="display:flex"]:not(.yf-news-tabbar):not(.yf-portal-header):not(.yf-header-left-wrap):not(.yf-header-right-wrap):not(.portal-logo-group),
.stMarkdown div[style*="display: flex"]:not(.yf-news-tabbar):not(.yf-portal-header):not(.yf-header-left-wrap):not(.yf-header-right-wrap):not(.portal-logo-group) {
flex-wrap: wrap !important;
height: auto !important;
}
.yf-news-tabbar {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
padding: 0 !important;
gap: 0px !important;
justify-content: space-between !important;
border-top: 1px solid #EBEBEB !important;
background: #FFFFFF !important;
}
.yf-news-tab {
flex: 1 1 auto !important;
min-height: 46px !important;
gap: 4px !important;
white-space: nowrap !important;
padding: 11px 8px 10px 8px !important;
font-size: 12px !important;
letter-spacing: -0.02em !important;
border-right: none !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
.yf-news-tab:last-child {
border-right: none !important;
}
/* スマホ表示時の上部グローバルナビ6タブ：アイコン上＋ラベル下の2段構成で高さを58pxに広げ、タップ領域を明確化 */
.yf-global-nav-tabbar .yf-news-tab {
flex: 1 1 0% !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 58px !important;
gap: 4px !important;
padding: 8px 2px 7px 2px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
border-right: none !important;
}
.yf-global-nav-tabbar .yf-news-tab:last-child {
border-right: none !important;
}
.yf-global-nav-tabbar .yf-news-tab .yf-gnav-svg {
width: 17px !important;
height: 17px !important;
}
.yf-news-tab.is-active {
background: #FFF5F7 !important;
color: #222222 !important;
font-weight: 800 !important;
border-bottom: 3px solid #E31C5F !important;
}
.yf-news-tab:active {
background: #F7F7F7 !important;
}
div[data-testid="stTabs"] [data-baseweb="tab-list"] {
gap: 0px !important;
border: 1px solid #EBEBEB !important;
border-bottom: 2px solid #E31C5F !important;
background: #F7F7F7 !important;
}
div[data-testid="stTabs"] button[data-baseweb="tab"] {
flex: 1 1 auto !important;
min-height: 48px !important;
padding: 11px 8px !important;
font-size: 12px !important;
border: none !important;
border-right: 1px solid #EBEBEB !important;
border-radius: 0 !important;
}
div[data-testid="stTabs"] button[data-baseweb="tab"]:last-child {
border-right: none !important;
}
div[data-testid="stTabs"] button[data-baseweb="tab"][aria-selected="true"] {
background: #FFF5F7 !important;
color: #222222 !important;
border-top: 3px solid #E31C5F !important;
font-weight: 800 !important;
}
.yf-news-panel {
padding: 8px 10px 12px 10px !important;
}
/* 6. データテーブルはスマホで列が潰れないよう最小幅を確保してスムーズに横スクロール */
.price-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.price-table {
min-width: 560px !important;
}
/* 7. モーダルダイアログもスマホ画面幅・画面高（100dvh）内に完全フィットさせ、上下見切れを防止 */
div[data-testid="stDialog"]:not(.cf-modal-backdrop) {
padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)) 6px !important;
align-items: flex-start !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) > div {
width: 94vw !important;
max-width: 94vw !important;
min-width: 0 !important;
max-height: calc(100vh - 18px) !important;
max-height: calc(100dvh - 18px) !important;
margin: auto !important;
padding: 4px 6px 8px 6px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) div[role="dialog"] {
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 2px 4px 4px 4px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) [slot="title"] {
padding: 10px 36px 4px 10px !important;
font-size: 16px !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) [slot="title"] + div {
padding: 4px 10px 8px 10px !important;
}
div[data-testid="stDialog"]:not(.cf-modal-backdrop) button[aria-label="Close"] {
top: 10px !important;
right: 10px !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) [data-testid="stVerticalBlock"] {
gap: 0.38rem !important;
}
div[data-testid="stDialog"]:has(.yf-modern-contact-modal) .stButton > button {
min-height: 38px !important;
padding: 6px 10px !important;
}
/* 8. スマホでプルダウン（stSelectbox）や入力欄をタップした際の画面自動ズーム（フォーカス拡大）を完全防止 */
div[data-testid="stSelectbox"] [data-baseweb="select"],
div[data-testid="stSelectbox"] [data-baseweb="select"] > div,
div[data-testid="stSelectbox"] [data-baseweb="select"] > div > div,
div[data-testid="stSelectbox"] [data-baseweb="select"] span,
div[data-testid="stSelectbox"] [data-baseweb="select"] input,
div[data-baseweb="select"] input,
div[data-testid="stDateInput"] input,
div[data-testid="stTextInput"] input,
div[data-testid="stNumberInput"] input,
div[data-baseweb="input"] input,
div[data-baseweb="base-input"] input,
input,
select,
textarea {
font-size: 16px !important;
-webkit-text-size-adjust: 100% !important;
touch-action: manipulation !important;
}
div[data-baseweb="popover"] li[role="option"] {
font-size: 15px !important;
padding: 12px 14px !important;
min-height: 46px !important;
}
}

.kj-ocean-txt{font-family:"Shippori Mincho","Kaisei Decol",serif;font-weight:800;background-image:linear-gradient(180deg,#0F172A 12%,#0369A1 62%,#0284C7 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;display:inline-block;}.kj-sun-txt{font-family:"Shippori Mincho","Kaisei Decol",serif;font-weight:800;background-image:linear-gradient(180deg,#DC2626 0%,#D97706 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;display:inline-block;position:relative;z-index:2;}

.em-mount {
    position: relative;
    z-index: 60;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt" 1, "kern" 1, "tnum" 1;
    color: #1C1917;
    user-select: none;
}
.em-top-crumb {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px 0;
    border-bottom: 1px solid #E5E2DC;
    font-size: 11.5px;
    color: #57534E;
}
.em-crumb-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.em-sec-code {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #B4532A;
    letter-spacing: 0.08em;
}
.em-sec-name {
    font-size: 12px;
    font-weight: 700;
    color: #44403C;
    letter-spacing: -0.01em;
}
.em-back-home {
    font-size: 11.5px;
    font-weight: 700;
    color: #0F172A;
    text-decoration: none;
    cursor: pointer;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: 3px;
    padding: 3px 10px;
    transition: all 0.14s ease;
}
.em-back-home:hover {
    color: #0369A1;
    background: #F0F9FF;
    border-color: #0284C7;
}
.em-masthead-grid {
    display: grid;
    grid-template-columns: 0.48fr 0.52fr;
    border: none;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0px;
    background: transparent;
    margin-bottom: 8px;
    box-shadow: none;
}
.em-masthead-grid.is-paid {
    grid-template-columns: 0.37fr 0.41fr 0.22fr;
}
.em-masthead-grid.is-home {
    grid-template-columns: 1fr;
    border: none;
    border-radius: 0px;
    background: transparent;
    margin-bottom: 4px;
    box-shadow: none;
}
@media (max-width: 960px) {
    .em-masthead-grid,
    .em-masthead-grid.is-paid,
    .em-masthead-grid.is-home {
        grid-template-columns: 1fr;
    }
    .em-cell {
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0;
    }
}
.em-cell {
    position: relative;
    padding: 10px 16px 10px 16px;
    border-right: 1px solid #E2E8F0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.em-masthead-grid.is-home .em-cell {
    padding: 0;
    border: none !important;
}
.em-cell:first-child {
    padding-left: 0;
}
.em-cell:last-child {
    border-right: none;
    padding-right: 0;
}
.em-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    min-height: 18px;
}
.em-eyebrow-lbl {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.em-eyebrow-meta {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.em-presets {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.em-preset-btn {
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    color: #3F3F46;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.3;
    transition: all 0.14s ease;
}
.em-preset-btn:hover {
    border-color: #18181B;
    color: #18181B;
    background: #FFFFFF;
}
.em-preset-btn.is-active {
    background: #18181B;
    border-color: #18181B;
    color: #FFFFFF;
}
.em-area-trigger {
    width: 100%;
    min-height: 42px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #D4D4D8;
    border-radius: 10px;
    padding: 4px 8px 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.em-area-trigger:hover {
    border-color: #71717A;
    background: #FAFAFA;
}
.em-area-trigger.is-open {
    border-color: #18181B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.em-area-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.em-area-title {
    font-size: 14px;
    font-weight: 800;
    color: #18181B;
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.em-trigger-Affordance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #3F3F46;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    padding: 0 9px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.14s ease;
}
.em-trigger-Affordance.is-icon-only {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    color: #52525B;
    box-shadow: none;
}
.em-cal-chev {
    transition: transform 0.18s ease;
    opacity: 0.85;
}
.em-date-bar.is-open .em-cal-chev {
    transform: rotate(180deg);
    opacity: 1;
}
.em-area-trigger .em-trigger-Affordance {
    background: #18181B;
    border-color: #18181B;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 0 10px;
    height: 28px;
    border-radius: 6px;
}
.em-area-trigger:hover .em-trigger-Affordance,
.em-area-trigger.is-open .em-trigger-Affordance {
    background: #27272A;
    border-color: #27272A;
    color: #FFFFFF;
}
.em-date-bar.is-open .em-trigger-Affordance.is-icon-only {
    background: #18181B;
    border-color: #18181B;
    color: #FFFFFF;
}
@media (hover: hover) {
    .em-date-trigger:hover .em-trigger-Affordance.is-icon-only {
        background: #18181B;
        border-color: #18181B;
        color: #FFFFFF;
    }
    .em-step-btn:hover:not(:disabled) {
        background: #FFFFFF;
        color: #18181B;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }
}
/* 全画面統一：カレンダー・日付コントロールバー（単日モード＆期間指定モード共通42px角丸ボックス） */
.em-date-bar,
.em-date-bar.is-period-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 42px;
    padding: 4px 6px 4px 12px;
    border: 1px solid #D4D4D8;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.em-date-bar:hover,
.em-date-bar.is-period-range:hover {
    border-color: #71717A;
    background: #FFFFFF;
}
.em-date-bar.is-open,
.em-date-bar.is-period-range.is-open {
    border-color: #18181B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.em-step-group {
    display: inline-flex;
    align-items: center;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    overflow: hidden;
    box-shadow: none;
    flex-shrink: 0;
    height: 32px;
    box-sizing: border-box;
}
.em-step-btn {
    width: 28px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #3F3F46;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.em-step-btn.today-circle {
    font-size: 11px;
    font-weight: 800;
    color: #52525B;
    letter-spacing: 0;
}
.em-step-btn.today-circle.is-today-active {
    color: #FFFFFF;
    background: #18181B;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.em-step-btn:disabled {
    color: #D4D4D8;
    cursor: not-allowed;
}
.em-date-trigger {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
    cursor: pointer;
    min-width: 0;
    transition: background 0.14s ease;
}
.em-date-main {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.em-date-txt,
.em-date-txt.is-range,
.em-date-bar.is-period-range .em-date-txt.is-range {
    font-size: 14px;
    font-weight: 800;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
}
.em-date-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F4F4F5;
    color: #3F3F46;
    border: 1px solid #E4E4E7;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
}
.em-date-badge.is-today {
    background: #F4F4F5;
    color: #18181B;
    border: 1px solid #D4D4D8;
}
.em-date-badge.is-rel {
    background: #F4F4F5;
    color: #52525B;
    border: 1px solid #E4E4E7;
}
.em-date-badge.is-hol {
    background: #FFF1F2;
    color: #BE123C;
    border: 1px solid #FECDD3;
}
.em-actions-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.85fr;
    gap: 6px;
    height: 36px;
    margin-top: 2px;
}
.em-act-btn {
    border: 1px solid #D4D4D8;
    border-radius: 8px;
    background: #FFFFFF;
    color: #18181B;
    font-size: 11.5px;
    font-weight: 700;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.14s ease;
}
.em-act-btn:hover {
    background: #F4F4F5;
    border-color: #18181B;
}
.em-act-btn.primary {
    background: #18181B;
    border-color: #18181B;
    color: #FFFFFF;
}
.em-act-btn.primary:hover {
    background: #27272A;
    border-color: #27272A;
}
.em-home-summary {
    min-height: 40px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0 4px 0;
    border-bottom: 1px solid #D6D3CD;
    font-size: 12.5px;
    color: #44403C;
    font-variant-numeric: tabular-nums;
}
/* ポップオーバー共通（エリア一覧 ＆ カレンダー） */
.em-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #FFFFFF;
    border: 1px solid #D4D4D8;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
    z-index: 9999;
    overflow: hidden;
}
.em-area-popover {
    width: 440px;
    max-width: 92vw;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
}
.em-area-grp-hdr {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #71717A;
    letter-spacing: 0.08em;
    padding: 7px 14px 5px 14px;
    background: #F4F4F5;
    border-top: 1px solid #E4E4E7;
    border-bottom: 1px solid #E4E4E7;
}
.em-area-opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid #F4F4F5;
    transition: background 0.12s ease;
}
.em-area-opt:hover {
    background: #F4F4F5;
}
.em-area-opt.is-selected {
    background: #EFF6FF;
    color: #0284C7;
}
.em-area-opt-name {
    font-size: 13.5px;
    font-weight: 700;
}
.em-area-opt-sub {
    font-size: 11px;
    color: #71717A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.em-area-opt.is-selected .em-area-opt-sub {
    color: #0284C7;
}
/* 日本語カレンダーポップオーバー */
.em-cal-popover {
    width: 356px;
    max-width: 94vw;
    padding: 12px;
    right: 0;
    left: auto;
    border-radius: 12px;
    border: 1px solid #D4D4D8;
    background: #FFFFFF;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}
.em-cal-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 8px;
}
.em-cal-mode-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #52525B;
    cursor: pointer;
}
.em-cal-mode-btn.is-active {
    background: #18181B;
    color: #FFFFFF;
}
.em-cal-hint {
    font-size: 11px;
    font-weight: 600;
    color: #3F3F46;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    padding: 5px 8px;
    margin-bottom: 8px;
    text-align: center;
}
.em-cal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.em-cal-month-lbl {
    font-size: 14.5px;
    font-weight: 800;
    color: #18181B;
    font-variant-numeric: tabular-nums;
}
.em-cal-nav-btn {
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #18181B;
    cursor: pointer;
    transition: all 0.14s ease;
}
.em-cal-nav-btn:hover {
    border-color: #18181B;
    background: #18181B;
    color: #FFFFFF;
}
.em-cal-dow-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    border-bottom: 1px solid #E4E4E7;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
.em-cal-dow {
    font-size: 11px;
    font-weight: 700;
    color: #52525B;
}
.em-cal-dow.sun { color: #E11D48; }
.em-cal-dow.sat { color: #0284C7; }
.em-cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.em-cal-day {
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    font-size: 12.5px;
    font-weight: 700;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    background: #FAFAFA;
}
.em-cal-day:hover:not(.is-disabled):not(.is-selected) {
    background: #F4F4F5;
}
.em-cal-day.is-sun,
.em-cal-day.is-hol {
    color: #E11D48;
}
.em-cal-day.is-sat:not(.is-hol) {
    color: #0284C7;
}
.em-cal-day.is-in-range {
    background: #F4F4F5;
    color: #18181B;
}
.em-cal-day.is-selected {
    background: #18181B !important;
    color: #FFFFFF !important;
    border-radius: 6px;
}
/* 分析室：対象期間（主：カレンダー範囲指定 ＋ 後：期間クイック切替セグメント） */
.em-date-bar.is-period-range {
    flex-wrap: nowrap;
    gap: 8px;
}
.em-date-bar.is-period-range .em-date-trigger {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
}
.em-opt-presets-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.em-opt-preset-btn {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 6px;
    height: 28px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #52525B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.14s ease;
}
.em-opt-preset-btn:hover {
    background: rgba(255, 255, 255, 0.65);
    color: #18181B;
}
.em-opt-preset-btn.is-active {
    background: #FFFFFF;
    color: #18181B;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
@media (max-width: 1200px) {
    .em-yr.is-range-yr {
        display: none !important;
    }
}
.em-cal-day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 1.5px #18181B;
}
.em-cal-day.is-disabled {
    color: #D4D4D8 !important;
    cursor: default;
    pointer-events: none;
}
.em-cal-dots {
    display: flex;
    gap: 2px;
    height: 5px;
    align-items: center;
    margin-top: 1px;
}
.em-cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
.em-cal-dot.so { background: #E11D48; }
.em-cal-dot.busy { background: #D97706; }
.em-cal-day.is-selected .em-cal-dot.so { background: #FDA4AF; }
.em-cal-day.is-selected .em-cal-dot.busy { background: #FCD34D; }
.em-cal-ftr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E4E4E7;
    font-size: 10.5px;
    color: #52525B;
}
.em-cal-legend {
    display: flex;
    align-items: center;
    gap: 8px;
}
.em-cal-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
@media (max-width: 768px) {
    .em-masthead-grid,
    .em-masthead-grid.is-paid,
    .em-masthead-grid.is-home {
        grid-template-columns: 1fr !important;
    }
    .em-cell {
        padding: 8px 0 10px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #E4E4E7 !important;
    }
    .em-eyebrow {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .em-eyebrow-lbl {
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    .em-eyebrow-meta {
        font-size: 10.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .em-area-title,
    .em-act-btn,
    .em-area-opt-sub {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .em-area-title {
        font-size: 14px !important;
    }
    .em-yr {
        display: none !important;
    }
    .em-date-bar:not(.is-period-range) {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-height: 40px !important;
        padding: 4px 6px 4px 10px !important;
    }
    .em-date-bar.is-period-range {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 7px 8px !important;
    }
    .em-date-trigger,
    .em-date-bar.is-period-range .em-date-trigger {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        padding: 1px 2px !important;
        gap: 6px !important;
        background: transparent !important;
    }
    .em-date-main {
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .em-date-txt {
        font-size: 14px !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .em-date-txt.is-range,
    .em-date-bar.is-period-range .em-date-txt.is-range {
        font-size: 13.5px !important;
    }
    .em-date-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }
    .em-date-badge.is-hol {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .em-trigger-Affordance.is-icon-only {
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    .em-step-group {
        height: 30px !important;
        flex-shrink: 0 !important;
    }
    .em-step-btn {
        width: 26px !important;
        height: 24px !important;
        font-size: 11.5px !important;
    }
    .em-step-btn.today-circle {
        font-size: 11px !important;
    }
    .em-date-bar.is-period-range .em-opt-presets-group {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 3px !important;
        margin: 0 !important;
    }
    .em-date-bar.is-period-range .em-opt-preset-btn {
        width: 100% !important;
        height: 28px !important;
        padding: 0 4px !important;
        font-size: 11.5px !important;
    }
    .em-actions-row {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 6px !important;
    }
    .em-act-btn {
        min-height: 34px !important;
        padding: 6px 8px !important;
    }
    .em-cal-ftr,
    .em-cal-legend {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

#food-price-table tbody tr[data-art-open-key] {
cursor: pointer !important;
transition: background-color 0.12s ease;
}
#food-price-table tbody tr[data-art-open-key]:hover td {
background-color: #F8FAFC !important;
}
#food-price-table tbody tr[data-art-open-key]:active td {
background-color: #F1F5F9 !important;
}


/* =========================================================================
   Cloudflare Pages Structural Adapter Layer
   (Zero overrides on app.py colors, fonts, max-width:1480px, or button pills!)
   ========================================================================= */
.stVerticalBlock[data-testid="stVerticalBlock"] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}
.stElementContainer[data-testid="stElementContainer"] {
    width: 100%;
    min-width: 0;
}
.stMarkdown p {
    margin: 0;
}
.stColumns[data-testid="stHorizontalBlock"] {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}
.stColumns.cf-gap-small { gap: 12px; }
.stColumns.cf-gap-medium { gap: 18px; }
.stColumns.cf-gap-large { gap: 24px; }
.stColumn[data-testid="stColumn"] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 860px) {
    .stColumns[data-testid="stHorizontalBlock"] {
        grid-template-columns: 1fr !important;
    }
}

/* Native Streamlit Button Base Layout (Colors/Borders come from app.py CSS!) */
.stButton > button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    box-sizing: border-box;
}
.stButton > button p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Native Streamlit ButtonGroup (SegmentedControl & Pills) Base Layout */
div[data-testid="stButtonGroup"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
div[data-testid="stButtonGroup"] button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
}
div[data-testid="stButtonGroup"] button p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Native Streamlit Inputs & Selects */
.cf-st-widget-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 4px;
}
.cf-st-baseweb-input,
.cf-st-baseweb-select {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cf-st-baseweb-input:focus-within,
.cf-st-baseweb-select:focus-within {
    border-color: #222222;
    box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.08);
}
.cf-st-text-input,
.cf-st-select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #222222;
    outline: none;
    box-sizing: border-box;
}
.cf-st-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #DDDDDD;
    border-radius: 12px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    color: #222222;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
}
.cf-st-textarea:focus {
    border-color: #222222;
    box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.08);
}
.cf-st-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #222222;
    cursor: pointer;
    user-select: none;
}
.cf-st-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #E31C5F;
    cursor: pointer;
}

/* Alerts & Captions */
.cf-st-caption {
    font-size: 11.5px;
    color: #6A6A6A;
    line-height: 1.5;
}
.cf-st-alert {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.6;
}
.cf-st-info { background: #F0F9FF; border: 1px solid #BAE6FD; color: #0369A1; }
.cf-st-warning { background: #FFFBEB; border: 1px solid #FDE68A; color: #B45309; }
.cf-st-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.cf-st-success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; }

/* Streamlit Tabs (`st.tabs`) */
.cf-st-tabs {
    width: 100%;
    margin-top: 4px;
}
.cf-st-tabbar[data-baseweb="tab-list"] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 14px;
}
.cf-st-tab-btn[data-baseweb="tab"] {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #6A6A6A;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cf-st-tab-btn[data-baseweb="tab"] p {
    margin: 0;
}
.cf-st-tab-btn[data-baseweb="tab"]:hover {
    color: #222222;
}
.cf-st-tab-btn[data-baseweb="tab"].is-active,
.cf-st-tab-btn[data-baseweb="tab"][aria-selected="true"] {
    color: #222222;
    border-bottom-color: #E31C5F;
    font-weight: 800;
}
.cf-st-tab-panel {
    display: none;
    width: 100%;
}
.cf-st-tab-panel.is-active {
    display: block;
}

/* Streamlit Expander (`st.expander`) */
details.cf-st-expander {
    border: 1px solid #EBEBEB;
    border-radius: 14px;
    background: #FFFFFF;
    overflow: hidden;
}
details.cf-st-expander > summary.cf-st-expander-summary {
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #222222;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}
details.cf-st-expander > summary.cf-st-expander-summary::-webkit-details-marker {
    display: none;
}
details.cf-st-expander > summary.cf-st-expander-summary::after {
    content: "▾";
    font-size: 13px;
    color: #6A6A6A;
    transition: transform 0.18s ease;
}
details.cf-st-expander[open] > summary.cf-st-expander-summary::after {
    transform: rotate(180deg);
}
.cf-st-expander-body {
    padding: 12px 16px 16px 16px;
    border-top: 1px solid #EBEBEB;
}

/* @st.dialog Modal Parity */
.cf-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000005 !important;
    background: rgba(15, 23, 42, 0.56) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    animation: cfModalBackdropIn 0.15s ease-out;
}
.cf-modal-dialog {
    position: relative !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid #EBEBEB !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22) !important;
    width: 100% !important;
    max-width: 860px !important;
    max-height: calc(100vh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    animation: cfModalDialogIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-modal-dialog.cf-modal-small {
    max-width: 540px !important;
}
.cf-modal-dialog.cf-modal-large {
    max-width: 860px !important;
}
@keyframes cfModalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes cfModalDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.cf-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 20px 8px 22px !important;
    background: #FFFFFF !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid #F4F4F5 !important;
}
.cf-modal-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #222222 !important;
    margin: 0 !important;
}
.cf-modal-close {
    appearance: none;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    color: #6A6A6A;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cf-modal-close:hover {
    background: #F7F7F7;
    color: #222222;
}
.cf-modal-close-floating {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 20;
}
.cf-modal-body {
    padding: 10px 22px 18px 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}
.cf-modal-dialog.cf-modal-no-title .cf-modal-body {
    padding: 20px 22px 18px 22px !important;
}
.cf-modal-dialog.cf-modal-no-title .cf-modal-body > div:first-child [data-testid="stMarkdownContainer"] > div {
    padding-right: 36px;
}
#food-price-table tbody tr[data-art-open-key] {
    cursor: pointer !important;
    transition: background-color 0.12s ease;
}
#food-price-table tbody tr[data-art-open-key]:hover td {
    background-color: #F8FAFC !important;
}
#food-price-table tbody tr[data-art-open-key]:active td {
    background-color: #F1F5F9 !important;
}
@media (max-width: 640px) {
    .cf-modal-backdrop {
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    }
    .cf-modal-dialog,
    .cf-modal-dialog.cf-modal-small,
    .cf-modal-dialog.cf-modal-large {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: calc(100vh - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        border-radius: 16px !important;
    }
    .cf-modal-header { padding: 12px 14px 8px 16px !important; }
    .cf-modal-body { padding: 8px 14px 14px 14px !important; }
    .cf-modal-dialog.cf-modal-no-title .cf-modal-body { padding: 16px 14px 14px 14px !important; }
}

/* Audio Guide Spot Button & Bottom Bar CSS (from app.py L25344-25591) */
.ag-spot-btn,
.sec-title .ag-spot-btn,
.ar-head .ag-spot-btn,
.ar-label .ag-spot-btn,
.ar-hero .ag-spot-btn,
.ar-hint .ag-spot-btn {
    appearance: none;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}
.ag-spot-btn svg,
.sec-title .ag-spot-btn svg,
.ar-label .ag-spot-btn svg {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    vertical-align: middle !important;
}
.ag-spot-btn:hover,
.sec-title .ag-spot-btn:hover,
.ar-head .ag-spot-btn:hover,
.ar-label .ag-spot-btn:hover,
.ar-hero .ag-spot-btn:hover,
.ar-hint .ag-spot-btn:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
    color: #1E293B !important;
}
.ag-spot-btn.ag-spot-playing,
.sec-title .ag-spot-btn.ag-spot-playing,
.ar-head .ag-spot-btn.ag-spot-playing,
.ar-label .ag-spot-btn.ag-spot-playing,
.ar-hero .ag-spot-btn.ag-spot-playing,
.ar-hint .ag-spot-btn.ag-spot-playing {
    background: #1E293B !important;
    border-color: #1E293B !important;
    color: #FFFFFF !important;
}
#ag-clean-audio-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999995 !important;
    background: #18181B !important;
    color: #FAF9F6 !important;
    border-top: 1px solid #3F3F46 !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28) !important;
    padding: 0 18px calc(8px + env(safe-area-inset-bottom, 0px)) 18px !important;
    display: none;
    box-sizing: border-box !important;
}
#ag-clean-audio-bar.visible {
    display: block !important;
}
#ag-clean-audio-bar svg {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
.ag-ca-prog-wrap {
    width: 100% !important;
    height: 3px !important;
    background: #3F3F46 !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}
.ag-ca-prog-fill {
    height: 100% !important;
    width: 0%;
    background: #38BDF8 !important;
    transition: width 0.15s linear !important;
}
.ag-ca-inner {
    max-width: 1360px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
}
.ag-ca-left, .ag-ca-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
}
.ag-ca-time {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #A1A1AA !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}
.ag-ca-center {
    min-width: 0 !important;
    background: #27272A !important;
    padding: 6px 12px !important;
    border-left: 3px solid #38BDF8 !important;
    border-radius: 0 4px 4px 0 !important;
    overflow: hidden !important;
}
.ag-ca-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ag-ca-script {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #F8FAFC !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
}
.ag-ca-btn {
    appearance: none !important;
    background: #27272A !important;
    color: #F4F4F5 !important;
    border: 1px solid #52525B !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}
.ag-ca-btn:hover { background: #3F3F46 !important; }
.ag-ca-btn.active { background: #334155 !important; border-color: #64748B !important; color: #FFFFFF !important; }
@media (max-width: 860px) {
    .ag-ca-inner { grid-template-columns: 1fr auto !important; gap: 6px 10px !important; }
    .ag-ca-center { grid-column: 1 / -1 !important; order: -1 !important; }
}