/* 基本スタイル */

:root {
	--primary: #4F46E5;
	--primary-light: #EEF2FF;
	--blue: #2563EB;
	--blue-light: #EFF6FF;
	--purple: #7E22CE;
	--purple-light: #F5F3FF;
	--green: #16A34A;
	--green-light: #ECFDF5;
	--amber: #D97706;
	--amber-light: #FFFBEB;
	--red: #DC2626;
	--red-light: #FEF2F2;
	--yellow: #FBBF24;
	--yellow-light: #FFFBEB;
	--gray: #6B7280;
	--gray-light: #F9FAFB;
	--white: #FFFFFF;
	--border-color: #E5E7EB;
	--text-color: #1F2937;
	--text-light: #6B7280;
	--indigo: #3730A3;
	/* primary より少し暗く、紫に近い青 */
	--indigo-light: #E0E7FF;
	/* indigo の明るいバージョン */
	/* または、ティール系の場合の例
  --teal: #0D9488;
  --teal-light: #CCFBF1;
  */
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color);
	background-color: var(--gray-light);
}
.container {
	max-width: 450px;
	margin: 0 auto;
	padding: 12px;
	background-color: var(--gray-light);
	min-height: 100vh;
}
/* ヘッダー */
.header {
	margin-bottom: 16px;
}
.header-content {
	display: flex;
    align-items: flex-start; 
	justify-content: space-between;
	background-color: var(--white);
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.header-main-content {
  flex-grow: 1;
}

.header-content-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-color);
    margin-right: 8px;
    line-height: 1.25;
}
.date-badge {
	background-color: #E0E7FF;
    color: var(--blue);
	font-size: 11px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-details {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.6;
}
.header-details .metric-small-info {
    display: block; /* ★ 常にブロック要素として表示（縦積み） */
    margin-right: 0;  /* 右マージンは不要になる */
    margin-bottom: 2px; /* 各行の間に少しマージン */
}
.header-details .metric-small-info:last-child {
    margin-bottom: 0; /* 最後の要素の下マージンは削除 */
}

/* 認証ボタン共通スタイル (既存のものをベースに) */
.auth-button {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 8px 16px; /* デフォルトのパディング */
  border-radius: 6px;
  font-size: 14px; /* デフォルトのフォントサイズ */
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* アイコンとテキストの間隔 */
  transition: background-color 0.2s ease;
}
.auth-button:hover {
  background-color: var(--indigo);
}

/* ログインプロンプトエリアのスタイル */
#login-required-section {
    margin-top: 60px; /* 上部に余白 */
    margin-bottom: 30px;
}
#login-button.auth-button { /* ログインボタン特有のスタイル */
    padding: 10px 25px; /* 少し大きめ */
    font-size: 15px;
    min-width: 220px; /* ボタンの最小幅 */
}

/* ログアウトボタンコンテナとボタン自体のスタイル */
#logout-section-container {
    background-color: var(--gray-light);
    border-top: 1px solid var(--border-color);
    text-align: center; /* HTMLのインラインスタイルから移動 */
    /* padding: 20px 0; を修正 */
    padding-top: 16px; /* 例: 上パディングを16pxに減らす */
    padding-bottom: 20px; /* 下パディングはそのままか、必要に応じて調整 */
    /* display: none; はJSで制御 */
}
#logout-button.auth-button {
  background-color: var(--gray);
  color: var(--white);
  padding: 10px 25px;
  font-size: 14px;
  min-width: 180px;
}
#logout-button.auth-button:hover {
  background-color: #555;
}


/* レスポンシブ対応 */
@media (max-width: 599px) {
  .header-content {
    padding: 12px;
    align-items: center;
  }
  .header-content-name {
    margin-bottom: 8px;
  }
  .title {
      font-size: 20px;
  }
  .date-badge {
      font-size: 11px;
      padding: 5px 10px;
  }
  .header-details {
      font-size: 11px;
      text-align: left;
  }
  /* .header-details .metric-small-info の display: block; は既にメディアクエリ外で指定されているため、ここでは不要 */
  /* 必要であれば、狭い画面特有のマージン調整などをここで行う */
  .header-details .metric-small-info {
    margin-bottom: 4px; /* 狭い画面ではマージンを少し広げるなど調整可能 */
  }


  #login-button.auth-button,
  #logout-button.auth-button {
    width: 90%;
    max-width: 300px;
    padding: 12px 15px;
  }
}
/* タブレットサイズ (例: 600px以上) ではデフォルトの横並びに戻る想定 */
/* 必要であれば、ここでさらに調整 */
@media (min-width: 600px) {
    /* .header-content はデフォルトで flex-direction: row なので特に指定不要 */
}

/* セクション共通スタイル */

.section {
	margin-bottom: 16px;
	background-color: var(--white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.section-header {
	background-color: var(--primary);
	padding: 12px;
}
.header-with-icon {
	display: flex;
	align-items: center;
}
.icon-circle {
	width: 32px;
	height: 32px;
	background-color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
}
.icon-circle i {
	color: var(--primary);
	font-size: 18px;
}
.icon-circle-large {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}
.primary-bg {
	background-color: var(--primary-light);
}
.primary-bg i {
	color: var(--primary);
	font-size: 20px;
}
.blue-bg {
	background-color: var(--blue-light);
}
.blue-bg i {
	color: var(--blue);
	font-size: 20px;
}
.green-bg {
	background-color: var(--green-light);
}
.green-bg i {
	color: var(--green);
	font-size: 20px;
}
.small-icon-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
}
.primary-light-bg {
	background-color: var(--primary-light);
}
.primary-light-bg i {
	color: var(--primary);
	font-size: 14px;
}
.blue-light-bg {
	background-color: var(--blue-light);
}
.blue-light-bg i {
	color: var(--blue);
	font-size: 14px;
}
.purple-light-bg {
	background-color: var(--purple-light);
}
.purple-light-bg i {
	color: var(--purple);
	font-size: 14px;
}
.green-light-bg {
	background-color: var(--green-light);
}
.green-light-bg i {
	color: var(--green);
	font-size: 14px;
}
.amber-light-bg {
	background-color: var(--amber-light);
}
.amber-light-bg i {
	color: var(--amber);
	font-size: 14px;
}
.red-light-bg {
	background-color: var(--red-light);
}
.red-light-bg i {
	color: var(--red);
	font-size: 14px;
}
.yellow-light-bg {
	background-color: var(--yellow-light);
}
.yellow-light-bg i {
	color: var(--yellow);
	font-size: 14px;
}
.section-title {
	font-size: 16px;
	font-weight: 500;
}
.section-title.white {
	color: var(--white);
}
.section-title.blue {
	color: var(--blue);
}
.section-title.purple {
	color: var(--purple);
}
.section-title.green {
	color: var(--green);
}
.section-title.amber {
	color: var(--amber);
}
.section-title.red {
	color: var(--red);
}
.section-body {
	padding: 12px;
	border-top: 1px solid var(--border-color);
	background-color: var(--white);
}
/* ビジネスゴール確認セクション */

.goal-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.goal-card {
	padding: 12px;
	background-color: var(--white);
	border-radius: 8px;
	border: 1px solid var(--border-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.flex-center {
	display: flex;
	align-items: center;
}
.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.subtitle {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-light);
}
.metric-value {
	font-weight: 700;
	color: var(--text-color);
	font-size: 18px;
}
.metric-info {
	font-size: 12px;
	color: var(--text-light);
}
.metric-small-info {
	font-size: 12px;
	color: var(--text-light);
	text-align: right;
}
.w-full {
	width: 100%;
}
.progress-container {
	margin-top: 8px;
}
.progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-light);
	margin-bottom: 4px;
}
.progress-bar {
	width: 100%;
	background-color: var(--gray-light);
	border-radius: 8px;
	height: 12px;
	position: relative;
}
.progress-fill {
	background-color: var(--green);
	height: 12px;
	border-radius: 8px;
	position: relative;
}
.progress-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 12px;
	font-weight: 500;
}
.status-container {
	margin-top: 12px;
	padding: 12px;
	background-color: var(--gray-light);
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.status-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.status-indicator {
	display: flex;
	align-items: center;
	margin-right: 8px;
}
.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
}
.status-dot.green {
	background-color: var(--green);
}
.status-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}
.status-value {
	font-size: 14px;
	font-weight: 500;
	margin-right: 8px;
}
.status-value.good {
	color: var(--green);
}
.status-next-date {
	font-size: 12px;
	color: var(--text-light);
	width: 100%;
	margin-top: 4px;
}
/* フィルターセクション */

.filter-header {
	padding: 12px;
	background-color: var(--primary-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.filter-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--primary);
}
.filter-current {
	font-size: 12px;
	color: var(--primary);
	margin-top: 2px;
}
.filter-value {
	font-weight: 500;
}
.filter-toggle-btn {
	display: flex;
	align-items: center;
}
.toggle-text {
	font-size: 10px;
	color: var(--primary);
	margin-right: 4px;
}
.filter-body {
	padding: 12px;
	border-top: 1px solid var(--border-color);
	background-color: var(--white);
}
.filter-option-container {
	margin-bottom: 8px;
}
.filter-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 4px;
}
.select-container {
	position: relative;
}
.filter-select {
	display: block;
	width: 100%;
	padding: 8px;
	background-color: var(--white);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	font-size: 14px;
	color: var(--text-color);
	appearance: none;
}
.filter-select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
.select-arrow {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	pointer-events: none;
}
.select-arrow i {
	color: var(--gray);
	font-size: 16px;
}
.campaign-info {
	margin-top: 8px;
	font-size: 12px;
	color: var(--primary);
	background-color: var(--primary-light);
	padding: 8px;
	border-radius: 6px;
}
.campaign-name {
	font-weight: 500;
}
/* トグルセクション共通スタイル */

.section-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	cursor: pointer;
}
.section-toggle.blue {
	background-color: var(--blue-light);
}
.section-toggle.purple {
	background-color: var(--purple-light);
}
.section-toggle.green {
	background-color: var(--green-light);
}
.section-toggle.amber {
	background-color: var(--amber-light);
}
.section-toggle.red {
	background-color: var(--red-light);
}
.toggle-btn {
	display: flex;
	align-items: center;
}
.toggle-text.blue {
	color: var(--blue);
}
.toggle-text.purple {
	color: var(--purple);
}
.toggle-text.green {
	color: var(--green);
}
.toggle-text.amber {
	color: var(--amber);
}
.toggle-text.red {
	color: var(--red);
}
/* セクションプレビュー */

.section-preview {
	padding: 12px;
	border-top: 1px solid var(--border-color);
	background-color: var(--white);
}
.metric-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.metric-grid.three-columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}
.metric-card {
	padding: 8px;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
}
.metric-label {
	font-size: 12px;
	color: var(--text-light);
	margin-bottom: 4px;
}
.metric-details {
	font-size: 12px;
	margin-top: 4px;
}
.detail-row {
	display: flex;
	justify-content: space-between;
}
.detail-label {
	color: var(--text-light);
}
.detail-value {
	font-weight: 500;
	text-align: right;
}
.trend {
	align-items: center;
	font-size: 12px;
	margin-top: auto;
}
.trend i {
	margin-right: 4px;
	font-size: 12px;
}
.trend.positive {
	color: var(--green);
}
.trend.negative {
	color: var(--red);
}
/* アイコンを180度回転させるためのカスタムクラス */

.rotate-180 {
	display: inline-block;
	/* transformを確実に適用するため */
	transform: rotate(180deg);
}
.metric-forecast {
	font-size: 12px;
	color: var(--blue);
	margin-top: 4px;
}
.rating {
	font-weight: 500;
	display: flex;
	align-items: center;
}
.rating i {
	margin-right: 4px;
	font-size: 14px;
}
.rating.excellent {
	color: var(--green);
}
.rating.good {
	color: var(--blue);
}
.rating.warning {
	color: var(--yellow);
}
.rating.bad {
	color: var(--red);
}
.rating-bar {
	width: 100%;
	background-color: var(--gray-light);
	border-radius: 8px;
	height: 8px;
	margin-top: 4px;
}
.rating-fill {
	height: 8px;
	border-radius: 8px;
}
.rating-fill.excellent {
	background-color: var(--green);
}
.rating-fill.good {
	background-color: var(--blue);
}
.rating-fill.warning {
	background-color: var(--yellow);
}
.rating-fill.bad {
	background-color: var(--red);
}
/* セクション詳細 */

.section-details {
	padding: 12px;
	border-top: 1px solid var(--border-color);
	background-color: var(--white);
}
.table-container {
	overflow-x: auto;
	width: 100%;
	margin-bottom: 16px;
}
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.data-table thead {
	background-color: var(--gray-light);
}
.data-table th {
	padding: 6px;
	text-align: left;
	font-weight: 500;
	color: var(--text-color);
}
.data-table td {
	padding: 6px;
	border-top: 1px solid var(--border-color);
}
.indicator-col {
	width: 25%;
	font-weight: 500;
}
.value-col {
	width: 20%;
	text-align: right;
}
.comparison-col {
	width: 27.5%;
	text-align: right;
}
.comparison-col .trend {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.comparison-col .previous-value {
	text-align: right;
	font-size: 10px;
	color: var(--text-light);
	margin-top: 4px;
}
.metric-name {
	font-weight: 500;
}
.comparison {
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}
.previous-value {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 4px;
}
.details {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 4px;
}
.details-small {
	/* 前年・先月比較用のお問い合わせ内訳コンテナ */
	margin-top: 2px;
	/* 上の数値との間隔を少し空ける */
}
.details-small div {
	/* details-small 内の各行 */
	font-size: 11px;
	/* フォントを小さく */
	line-height: 1.3;
	/* 行間を詰める */
	color: var(--text-light);
	/* 少し薄い色に */
}
.details-small span:first-child {
	/* キー名 */
	/* 特にスタイル変更なし or 必要なら */
}
.details-small span:last-child {
	/* 値 */
	font-weight: normal;
	/* 通常の太さに */
}
.insights-box {
	margin-top: 12px;
	font-size: 12px;
	color: var(--text-light);
	background-color: var(--gray-light);
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.insights-title {
	font-weight: 500;
	margin-bottom: 4px;
	color: var(--text-color);
}
.insights-title.blue {
	color: var(--blue);
}
.insights-title.purple {
	color: var(--purple);
}
.insights-title.green {
	color: var(--green);
}
.insights-title.amber {
	color: var(--amber);
}
.insights-title.red {
	color: var(--red);
}
.insights-list {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.insights-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
}

.insights-item .bullet {
  flex-shrink: 0;
  margin-top: 6px;
  margin-right: 8px;
}

.insights-item p {
  margin: 0;
  line-height: 1.6;
}

.bullet {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	margin-top: 6px;
	margin-right: 6px;
}
.bullet.blue {
	background-color: var(--blue);
}
.bullet.purple {
	background-color: var(--purple);
}
.bullet.green {
	background-color: var(--green);
}
.bullet.amber {
	background-color: var(--amber);
}
.bullet.red {
	background-color: var(--red);
}
.bullet.primary {
	background-color: var(--primary);
}
.evaluation-summary {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-color);
	display: flex;
	align-items: center;
}
.evaluation-label {
	font-weight: 500;
	color: var(--text-color);
	margin-right: 8px;
}
.evaluation {
	font-weight: 500;
	display: flex;
	align-items: center;
}
.evaluation i {
	margin-right: 4px;
}
.evaluation.excellent {
	color: var(--green);
}
.evaluation.warning {
	color: var(--yellow);
}
.evaluation.bad {
	color: var(--red);
}
/* AI活用状況セクション */

.ai-status-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ai-status-card {
	background-color: var(--white);
	border-radius: 8px;
	border: 1px solid var(--border-color);
	padding: 8px;
}
.ai-status-label {
	font-size: 14px;
	font-weight: 500;
}
.ai-level-badge {
	background-color: var(--blue-light);
	color: var(--blue);
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
}
.ai-progress-badge {
	background-color: var(--yellow-light);
	color: var(--yellow);
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
}
.ai-level-box {
	margin-bottom: 16px;
	background-color: var(--white);
	border: 1px solid var(--green-light);
	border-radius: 8px;
	padding: 12px;
}
.ai-level-header {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.ai-level-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}
.ai-level-description {
	font-size: 12px;
	color: var(--text-light);
}
.ai-level-legend {
	display: flex;
	margin-top: 8px;
}
.legend-item {
	display: flex;
	align-items: center;
	margin-right: 16px;
}
.legend-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 4px;
}
.legend-color.blue {
	background-color: var(--blue);
}
.legend-color.gray {
	background-color: var(--gray);
}
.ai-level-section {
	margin-bottom: 16px;
}
.ai-level-section.inactive {
	opacity: 0.5;
}
.ai-level-section-title {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
}
.level-number {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	color: var(--white);
	font-size: 10px;
}
.level-number.blue {
	background-color: var(--blue);
}
.level-number.gray {
	background-color: var(--gray);
}
.data-table.faded {
	opacity: 0.7;
}
.explanation {
	font-size: 12px;
}
.status-cell {
	text-align: center;
}
.status-good {
	color: var(--green);
	font-size: 18px;
}
.status-warning {
	color: var(--yellow);
	font-size: 18px;
}
.status-bad {
	color: var(--red);
	font-size: 18px;
}
.action-required {
	font-size: 12px;
}
.level-note {
	font-size: 12px;
	color: var(--text-light);
	background-color: var(--gray-light);
	padding: 8px;
	border-radius: 4px;
	margin-top: 8px;
}
.ai-progress-box {
	padding: 12px;
	background-color: var(--gray-light);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	margin-bottom: 16px;
}
.ai-progress-title {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 8px;
}
.progress-sections {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.progress-section {
	width: 100%;
}
.progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.progress-label {
	font-size: 12px;
	color: var(--text-color);
}
.progress-label.inactive {
	color: var(--gray);
}
.progress-percentage {
	font-size: 12px;
	color: var(--blue);
}
.progress-percentage.inactive {
	color: var(--gray);
}
.progress-bar {
	width: 100%;
	background-color: var(--gray-light);
	border-radius: 8px;
	height: 10px;
}
.progress-fill {
	height: 10px;
	border-radius: 8px;
}
.progress-fill.blue {
	background-color: var(--blue);
}
.progress-fill.gray {
	background-color: var(--gray);
}
/* 市況感セクション */

.market-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.market-info-card {
	background-color: var(--white);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px;
}
.market-info-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 12px;
}
.market-info-content {
	background-color: var(--gray-light);
	border-radius: 8px;
	padding: 12px;
}
.market-info-text {
	font-size: 14px;
	line-height: 1.6;
}
.market-info-text p {
	margin-bottom: 12px;
}
.label {
	font-weight: 500;
}
.status-legend {
	display: flex;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-color);
}
.status-item {
	display: flex;
	align-items: center;
	margin-right: 16px;
}
.status-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 4px;
}
.status-color.green {
	background-color: var(--green);
}
.status-color.yellow {
	background-color: var(--yellow);
}
.status-color.red {
	background-color: var(--red);
}
.status-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 8px;
}
.status-tag {
	display: flex;
	align-items: center;
	padding: 4px;
	border-radius: 4px;
	font-size: 12px;
}
.status-tag.good {
	background-color: var(--green-light);
}
.status-tag.warning {
	background-color: var(--yellow-light);
}
.status-tag.bad {
	background-color: var(--red-light);
}
.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
}
.status-dot.green {
	background-color: var(--green);
}
.status-dot.yellow {
	background-color: var(--yellow);
}
.status-dot.red {
	background-color: var(--red);
}
.forecast-box {
	background-color: var(--primary-light);
	padding: 12px;
	border-radius: 8px;
	margin-bottom: 12px;
}
.forecast-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--primary);
	margin-bottom: 8px;
}
.forecast-summary {
	font-size: 14px;
	color: var(--primary);
}
.highlight {
	font-weight: 500;
}
.forecast-period {
	display: block;
	font-size: 10px;
	color: var(--primary);
	margin-top: 4px;
	margin-bottom: 12px;
}
.budget-metrics {
	margin-bottom: 12px;
}
.budget-row {
	display: flex;
	justify-content: space-between;
	padding-bottom: 4px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border-color);
	font-size: 14px;
}
.budget-label {
	color: var(--text-color);
}
.budget-value {
	font-weight: 500;
}
.graph-container {
	background-color: var(--gray-light);
	padding: 12px;
	border-radius: 8px;
}
.graph-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 8px;
}
.graph-flex {
	display: flex;
	align-items: stretch;
	height: 170px;
	/* この高さは全体のバランスを見て調整 */
	width: 100%;
	/* ★ 親要素の幅いっぱいに広がるように明示 */
}
.y-axis-labels {
	width: auto;
	min-width: 40px;
	/* これより狭くならないように */
	padding-right: 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 9px;
	color: var(--text-light);
	text-align: right;
	height: calc(100% - 15px);
	/* X軸ラベル分の高さを考慮 */
	margin-bottom: 15px;
}
.y-axis-labels .y-main-label {
	font-size: 10px;
	line-height: 1.1;
	margin-bottom: 2px;
}
.y-axis-labels .y-tick-label {
	display: block;
}
.graph-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	min-width: 0;
	/*overflow: hidden;*/
	padding-bottom: 20px;
}
.graph-chart {
	/* ID: market-graph-chart-area */
	flex-grow: 1;
	width: 100%;
	background-color: var(--white);
	border-radius: 8px;
	border: 1px solid var(--border-color);
	position: relative;
	min-height: 120px;
}
.graph-svg {
	/* ID: market-graph-svg */
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.x-axis-labels {
	/* ID: market-graph-x-axis-labels */
	display: flex;
	justify-content: space-between;
	font-size: 9px;
	/* 画像に合わせてもう少し小さく */
	color: var(--text-light);
	margin-top: 3px;
	padding: 0 5px;
	/* 左右のパディング */
	height: 12px;
	/* X軸ラベルの高さを確保 */
	line-height: 12px;
}
.x-axis-title {
	text-align: right;
	font-size: 9px;
	color: var(--text-light);
	/* margin-top: 0; */
	/* x-axis-labelsの下に来るので不要かも */
	padding-right: 5px;
	position: absolute;
	/* .graph-bodyの右下に配置 */
	bottom: 0px;
	/* x-axis-labels の下に配置されるように調整 */
	right: 0;
	width: 100%;
}
.graph-note {
	margin-top: 18px;
	/* X軸タイトルの分も考慮 */
	display: flex;
	/* justify-content: center; */
	/* HTML構造的に左寄せになるのでこれでOK */
	align-items: center;
	font-size: 11px;
	/* 少し小さく */
	color: var(--text-light);
}
.graph-note-dot {
	width: 6px;
	/* 少し小さく */
	height: 6px;
	border-radius: 50%;
	background-color: var(--primary);
	margin-right: 4px;
	flex-shrink: 0;
	/* 縮まないように */
}
/* SVG内要素のスタイル */

.graph-point {
	fill: var(--primary);
	cursor: pointer;
	transition: r 0.1s ease-in-out, fill 0.1s ease-in-out;
}
.graph-point:hover {
	r: 6;
	/* 少し小さく */
	fill: var(--blue);
}
.graph-dashed-line {
	stroke: var(--text-light);
	stroke-width: 0.5;
	stroke-dasharray: 2, 2;
}
.competitor-strategy {
	margin-top: 12px;
	padding: 12px;
	background-color: var(--gray-light);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	display: flex;
	align-items: center;
}
.competitor-strategy-label {
	font-weight: 500;
	color: var(--text-color);
	margin-right: 8px;
}
.competitor-strategy-value {
	color: var(--amber);
	font-weight: 500;
}
/* 改善施策セクション */

.priority-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.priority-item {
	display: flex;
	align-items: center;
	background-color: var(--white);
	border-radius: 8px;
	padding: 8px;
	border: 1px solid var(--border-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.priority-number {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	color: var(--white);
	margin-right: 8px;
	flex-shrink: 0;
}
.priority-number.high {
	background-color: var(--red);
}
.priority-number.medium {
	background-color: var(--amber);
}
.priority-number.low {
	background-color: var(--yellow);
}
.priority-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	flex-grow: 1;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
}
.improvement-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.improvement-card {
	background-color: var(--white);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}
.improvement-card.high::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: var(--red);
}
.improvement-card.medium::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: var(--amber);
}
.improvement-card.low::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: var(--yellow);
}
.improvement-header {
	display: flex;
	align-items: center;
	padding: 12px;
}
.improvement-number {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--white);
	margin-right: 8px;
	flex-shrink: 0;
}
.improvement-number.high {
	background-color: var(--red);
}
.improvement-number.medium {
	background-color: var(--amber);
}
.improvement-number.low {
	background-color: var(--yellow);
}
.improvement-title {
	font-size: 14px;
	font-weight: 500;
	flex-grow: 1;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
	line-height: 1.5;
}
.improvement-title.high {
	color: var(--red);
}
.improvement-title.medium {
	color: var(--amber);
}
.improvement-title.low {
	color: var(--yellow);
}
.improvement-details {
	padding: 12px;
}
.improvement-row {
	display: flex;
	margin-bottom: 8px;
	align-items: flex-start;
}
.improvement-label {
	font-weight: 500;
	width: 80px;
	flex-shrink: 0;
	margin-right: 8px;
	padding-top: 1px;
}
.improvement-text {
	font-size: 14px;
	color: var(--text-color);
	flex-grow: 1;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
	line-height: 1.6;
}
.priority-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
}
.priority-badge.high {
	background-color: var(--red-light);
	color: var(--red);
}
.priority-badge.medium {
	background-color: var(--amber-light);
	color: var(--amber);
}
.priority-badge.low {
	background-color: var(--yellow-light);
	color: var(--yellow);
}
.impact-container {
	display: flex;
	align-items: center;
}
.impact-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	background-color: var(--primary-light);
	color: var(--primary);
	margin-right: 8px;
}
.impact-dots {
	display: flex;
}
.impact-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--gray-light);
	margin-right: 4px;
}
.impact-dot.active {
	background-color: var(--red);
}
.improvement-list {
	font-size: 14px;
	color: var(--text-color);
	flex-grow: 1;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
	line-height: 1.6;
	display: block;
}
.improvement-list li {
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 4px;
}
.roi-summary {
	margin-top: 16px;
	padding: 12px;
	background-color: var(--primary-light);
	border: 1px solid var(--primary-light);
	border-radius: 8px;
	display: flex;
	align-items: center;
}
.roi-icon {
	width: 32px;
	height: 32px;
	background-color: var(--primary-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}
.roi-icon i {
	color: var(--primary);
	font-size: 16px;
}
.roi-content {
	flex: 1;
}
.roi-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--primary);
}
.roi-description {
	font-size: 12px;
	color: var(--primary);
}
.highlight-green {
	color: var(--green);
	font-weight: 500;
}
/* 総括セクション */

.summary-header {
	padding: 12px;
	background-color: var(--gray-light);
	margin-bottom: 0;
}
.summary-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}
.summary-content-inner {
	font-size: 14px;
	line-height: 1.6;
	background-color: var(--white);
	padding: 12px;
	padding-top: 12px;
    padding-bottom: 12px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.summary-content-inner p {
	margin-bottom: 8px;
}
.highlight-red {
	color: var(--red);
	font-weight: 500;
}
/* アクションボタン */

.action-buttons {
	background-color: var(--white);
	border-top: 1px solid var(--border-color);
	padding: 12px;
	display: flex;
	justify-content: space-between;
}
.btn-primary {
	flex: 1;
	background-color: var(--primary);
	color: var(--white);
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
}
.btn-secondary {
	flex: 1;
	margin-right: 8px;
	background-color: var(--white);
	color: var(--primary);
	border: 1px solid var(--primary);
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* フッター */

.footer {
	text-align: center;
	font-size: 12px;
	color: var(--text-light);
	margin-top: 24px;
}
.copyright {
	margin-top: 4px;
}
.graph-point {
	fill: var(--primary);
	cursor: pointer;
	/* クリック可能なことを示すカーソル */
	transition: r 0.2s ease-in-out, fill 0.2s ease-in-out;
	/* ホバーエフェクト用 */
}
.graph-point:hover {
	r: 7;
	/* ホバー時に少し大きくする */
	fill: var(--blue);
	/* 色を変えるなど */
}
.graph-label-title {
	font-size: 11px;
	/* フォントサイズ調整 */
	fill: var(--text-color);
	font-weight: 500;
}
.graph-label-subtitle {
	font-size: 11px;
	/* フォントサイズ調整 */
	fill: var(--text-light);
}
/* フィードバックセクション */

#customer-feedback-section .section-body {
	padding: 16px;
}
/* フィードバックセクションのトグルヘッダー */

/* index.htmlで section-toggle に 新しいクラス (例: indigo) を付与するか、
   IDセレクタで直接指定します。ここではIDセレクタを使ってみます。*/

#feedback-section-toggle {
	/* IDで直接指定 */
	background-color: var(--indigo-light);
	/* 新しい薄いインディゴ */
}
#feedback-section-toggle .section-title {
	/* タイトル文字色 */
	color: var(--indigo);
	/* 新しいインディゴ */
}
#feedback-section-toggle .small-icon-circle {
	/* アイコン背景 */
	background-color: var(--indigo-light);
	/* 上記ヘッダーと合わせる */
}
#feedback-section-toggle .small-icon-circle i {
	/* アイコン色 */
	color: var(--indigo);
}
#feedback-section-toggle .toggle-text {
	/* 「詳細を見る」の文字色 */
	color: var(--indigo);
}
#feedback-section-toggle .fa-chevron-down, #feedback-section-toggle .fa-chevron-up {
	/* 開閉アイコンの色 */
	color: var(--indigo);
}
/* フィードバックセクション詳細のパディングを調整 */

#feedback-section-details {
	padding: 16px;
	background-color: var(--white);
	/* 詳細部分の背景は白に */
}
.feedback-subsection {
	margin-bottom: 24px;
	/* 各サブセクション間のマージンを少し広げる */
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
}
.feedback-subsection:last-child {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}
.feedback-subtitle {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}
.feedback-subtitle i {
	margin-right: 8px;
	color: var(--indigo);
	font-size: 1.2em;
	transition: transform 0.3s ease-in-out;
}
.feedback-subtitle:hover i {
	transform: rotate(10deg) scale(1.1);
}
.feedback-description {
	font-size: 13px;
	color: var(--text-light);
	margin-bottom: 16px;
	line-height: 1.6;
}
.satisfaction-buttons {
	display: flex;
	justify-content: space-around;
	gap: 12px;
	margin-bottom: 16px;
}
.satisfaction-btn {
	flex-grow: 1;
	padding: 12px 10px;
	font-size: 14px;
	font-weight: 500;
	/* background-color: var(--gray-light); /* ← 初期共通背景色は削除 */
	border: 1px solid var(--border-color);
	/* color: var(--text-light); /* ← 初期共通文字色は削除 */
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* 各ボタンの初期状態の色を設定 */

.satisfaction-btn[data-satisfaction="happy"] {
	background-color: var(--green-light);
	/* 薄い緑 */
	color: var(--green);
	/* 緑色の文字・アイコン */
	border-color: var(--green);
	/* 緑色の枠線 */
}
.satisfaction-btn[data-satisfaction="neutral"] {
	background-color: var(--yellow-light);
	/* 薄い黄色 */
	color: var(--amber);
	/* オレンジ系の文字・アイコン (var(--yellow) だと薄すぎる可能性) */
	border-color: var(--amber);
	/* オレンジ系の枠線 */
}
.satisfaction-btn[data-satisfaction="sad"] {
	background-color: var(--red-light);
	/* 薄い赤 */
	color: var(--red);
	/* 赤色の文字・アイコン */
	border-color: var(--red);
	/* 赤色の枠線 */
}
.satisfaction-btn:hover {
	/* ホバー時は少し濃い色にする、または影を強調するなどの共通スタイル */
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 各ボタンのホバー時の個別スタイル（オプション：さらに色を濃くするなど） */

.satisfaction-btn[data-satisfaction="happy"]:hover {
	background-color: #dcfce7;
	/* var(--green-light) より少し濃い緑 */
	/* border-color: var(--green); (初期値と同じなので不要かも) */
}
.satisfaction-btn[data-satisfaction="neutral"]:hover {
	background-color: #fef3c7;
	/* var(--yellow-light) より少し濃い黄 */
	/* border-color: var(--amber); (初期値と同じなので不要かも) */
}
.satisfaction-btn[data-satisfaction="sad"]:hover {
	background-color: #fee2e2;
	/* var(--red-light) より少し濃い赤 */
	/* border-color: var(--red); (初期値と同じなので不要かも) */
}
.satisfaction-btn:active {
	transform: translateY(0px) scale(1);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.satisfaction-btn i {
	margin-right: 8px;
	font-size: 1.6em;
	/* 顔文字アイコンを大きく */
	transition: transform 0.3s ease;
}
.satisfaction-btn:hover i {
	transform: scale(1.1) rotate(5deg);
}
.satisfaction-btn.selected {
	color: var(--white);
	/* 文字とアイコンは白に */
	transform: translateY(0px) scale(1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}
.satisfaction-btn.selected i {
	/* color: var(--white); (親から継承) */
	transform: scale(1.05);
}
/* 選択時の色分け */

.satisfaction-btn.selected {
	color: var(--white);
	transform: translateY(0px) scale(1);
	/* 選択時は浮き上がり効果をリセット */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
	/* 内側の影で押された感を出す */
}
.satisfaction-btn.selected i {
	color: var(--white);
	transform: scale(1.05);
	/* 選択時もアイコンを少し強調 */
}
/* 選択時の背景色は既存のまま（濃い色） */

.satisfaction-btn[data-satisfaction="happy"].selected {
	background-color: var(--green);
	border-color: var(--green);
}
.satisfaction-btn[data-satisfaction="neutral"].selected {
	background-color: var(--amber);
	border-color: var(--amber);
}
.satisfaction-btn[data-satisfaction="sad"].selected {
	background-color: var(--red);
	border-color: var(--red);
}
.feedback-textarea {
	width: 100%;
	padding: 12px;
	/* パディング調整 */
	font-size: 14px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	/* 角丸を少し大きく */
	margin-bottom: 12px;
	/* ボタンとの間隔 */
	resize: vertical;
	box-sizing: border-box;
	min-height: 90px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.feedback-textarea:focus {
	border-color: var(--indigo);
	outline: none;
	box-shadow: 0 0 0 3px var(--indigo-light);
}
.feedback-submit-btn {
	width: 100%;
	padding: 12px 15px;
	/* パディング調整 */
	font-size: 15px;
	/* 少し大きく */
	font-weight: 600;
	/* 太字に */
	background-color: var(--indigo);
	color: var(--white);
	border: 1px solid var(--indigo);
	border-radius: 8px;
	/* 角丸を少し大きく */
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.feedback-submit-btn:hover {
	background-color: #28237C;
	/* var(--indigo) の少し濃い色 (手動で調整) */
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.feedback-submit-btn:active {
	transform: translateY(0px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.feedback-submit-btn:disabled {
	background-color: var(--gray);
	border-color: var(--gray);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}
.feedback-message {
	font-size: 13px;
	margin-top: 12px;
	/* ボタンとの間隔 */
	padding: 10px;
	border-radius: 6px;
	/* 角丸を少し大きく */
	text-align: center;
	border: 1px solid transparent;
	min-height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	/* メッセージも少し強調 */
}
.feedback-message.success {
	background-color: var(--green-light);
	color: var(--green);
	border-color: var(--green);
}
.feedback-message.error {
	background-color: var(--red-light);
	color: var(--red);
	border-color: var(--red);
}

/* ===== テーブルレイアウト維持＆横スクロール防止のための修正 (ここから) ===== */

/* 1. テーブル全体のレイアウト方法を「固定」に設定し、幅を画面100%に */
.data-table {
  table-layout: fixed;
  width: 100%;
}

/* 2. テーブルの各列の幅をパーセンテージで指定 (合計100%) */
/* th (ヘッダー) に指定すれば、td (セル) もそれに追従します */
.data-table th:nth-child(1) { width: 30%; } /* 指標 */
.data-table th:nth-child(2) { width: 22%; } /* 当月(実績) */
.data-table th:nth-child(3) { width: 24%; } /* 前年比 */
.data-table th:nth-child(4) { width: 24%; } /* 先月比 */


/* 3. 原因となっている 긴 (長い) テキストを強制的に改行させる */
.details, .details-small {
  word-break: break-all;
}

/* ===== テーブルレイアウト維持＆横スクロール防止のための修正 (ここまで) ===== */

/* ===== 「Web広告AI活用状況」テーブル専用のレイアウト調整 (ここから) ===== */

/* 「③ Web広告AI活用状況」セクション内のテーブルに限定して列幅を上書き */
#ai-utilization .data-table th:nth-child(1) { width: 25%; } /* 項目 */
#ai-utilization .data-table th:nth-child(2) { width: 35%; } /* 説明 */
#ai-utilization .data-table th:nth-child(3) { width: 10%; } /* 判定 (狭くする) */
#ai-utilization .data-table th:nth-child(4) { width: 30%; } /* 判定向上の対応策 */

/* 「判定」列のヘッダーとセルの内容を中央揃えにする */
#ai-utilization .data-table th:nth-child(3),
#ai-utilization .data-table td:nth-child(3) {
  text-align: center;
}

/* 他のテキスト列は読みやすさのため左揃えに設定する */
#ai-utilization .data-table th:not(:nth-child(3)),
#ai-utilization .data-table td:not(:nth-child(3)) {
  text-align: left;
}

/* ===== 「Web広告AI活用状況」テーブル専用のレイアウト調整 (ここまで) ===== */

/* ===== ローディング画面スタイル ===== */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.loader-spinner {
  border: 5px solid var(--gray-light);
  border-top: 5px solid var(--primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.loader-text {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
}

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

/* ===== 外部ブラウザ強制誘導モーダルのスタイル (ここから) ===== */
#force-external-browser-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

#force-external-browser-prompt .prompt-content {
    background-color: var(--white);
    padding: 24px;
    border-radius: 12px;
    text-align: left; /* 左揃えに変更 */
    max-width: 400px;
    width: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
}

#force-external-browser-prompt h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 8px 0;
    text-align: center; /* タイトルは中央揃え */
}

#force-external-browser-prompt p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 16px 0;
    text-align: center; /* 説明文も中央揃え */
}

/* 手順リストのスタイル */
.prompt-instructions {
    list-style-type: decimal;
    list-style-position: inside;
    background-color: var(--gray-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 20px 0;
}

.prompt-instructions li {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 8px;
    line-height: 1.5;
}
.prompt-instructions li:last-child {
    margin-bottom: 0;
}

/* URL表示欄とコピーボタンのエリア */
.prompt-url-area {
    display: flex;
    gap: 8px;
}

/* URL表示欄のスタイル */
#page-url-input {
    flex-grow: 1; /* 横幅を可能な限り広げる */
    padding: 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--gray-light);
    color: var(--text-color);
    /* テキスト選択は可能だが編集は不可 */
    overflow-x: scroll; /* URLが長い場合スクロール */
}

/* ボタンのスタイル */
#force-external-browser-prompt .prompt-button {
    flex-shrink: 0; /* ボタン幅が縮まないように */
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s;
    background-color: var(--primary);
    color: var(--white);
    white-space: nowrap; /* ボタン内テキストの改行を防ぐ */
}

#force-external-browser-prompt .prompt-button:hover {
    background-color: var(--indigo);
}
/* ===== 外部ブラウザ強制誘導モーダルのスタイル (ここまで) ===== */