@charset "UTF-8";
/* report.scss
   目的：
   - <article class="report"> の中だけ、Tailwindっぽい見た目を再現
   - クラス無しHTMLでも自動で整う
   - もしクラス付きHTMLが混ざっても .report 内なら効く（最小セットのユーティリティ同梱）
*/
.report {
  /* ===== Tailwind-ish tokens ===== */
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50:  #f9fafb;
  color: var(--gray-900);
  max-width: none;
  /* max-w-none 相当 */
  line-height: 1.85;
  font-size: 18px;
  /* prose-lg 相当の“体感” */ }

.report a{
    color: #E15F21;}
.report a:hover{
      opacity: 0.7;}


/* =========================================================
   1) “Tailwindクラス”の最小再現（.report 内限定）
   ========================================================= */
.report {
  /* text colors */
  /* font */
  /* sizes */
  /* leading */
  /* spacing (代表だけ) */
  /* bg / border */
  /* radius */
  /* list */
  /* table helpers */ }
  .report .text-gray-900 {
    color: var(--gray-900); }
  .report .text-gray-700 {
    color: var(--gray-700); }
  .report .text-gray-600 {
    color: var(--gray-600); }
  .report .font-bold {
    font-weight: 700; }
  .report .font-medium {
    font-weight: 500; }
  .report .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem; }
  .report .text-sm {
    font-size: .875rem;
    line-height: 1.25rem; }
  .report .leading-relaxed {
    line-height: 1.75; }
  .report .mt-12 {
    margin-top: 3rem; }
  .report .mb-4 {
    margin-bottom: 1rem; }
  .report .mb-6 {
    margin-bottom: 1.5rem; }
  .report .mb-12 {
    margin-bottom: 3rem; }
  .report .my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem; }
  .report .p-8 {
    padding: 2rem; }
  .report .px-2 {
    padding-left: .5rem;
    padding-right: .5rem; }
  .report .py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem; }
  .report .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
  .report .py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem; }
  .report .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem; }
  .report .pl-6 {
    padding-left: 1.5rem; }
  .report .bg-gray-50 {
    background: var(--gray-50); }
  .report .bg-gray-100 {
    background: var(--gray-100); }
  .report .border {
    border-width: 1px;
    border-style: solid; }
  .report .border-gray-200 {
    border-color: var(--gray-200); }
  .report .rounded {
    border-radius: .375rem; }
  .report .rounded-lg {
    border-radius: .5rem; }
  .report .list-disc {
    list-style: disc; }
  .report .space-y-2 > * + * {
    margin-top: .5rem; }
  .report .min-w-full {
    min-width: 100%; }
  .report .overflow-x-auto {
    overflow-x: auto; }
  .report .max-w-none {
    max-width: none; }
  .report .prose {
    /* タイポの当たり方を element 側で担保するので、ここは空でもOK */ }
  .report .prose-lg {
    /* 同上 */ }

/* =========================================================
   2) “クラス無しHTMLでも自動でTailwind風になる”本体
   ========================================================= */
.report {
  /* 余白（量産用の基本） */
  /* 見出し（h2 が Tailwindの text-2xl font-bold text-gray-900 mt-12 mb-6 相当） */
  /* ========== og-table（あなたのHTMLに合わせた決定版） ========== */
  /* テーブルが横にはみ出る環境のための安全策 */
  /* もし “overflow-x-auto の div” を挟まない量産をするなら、テーブル側で守る */
  /* ========== チャートセクション ========== */ }
  .report p {
    color: var(--gray-700);
    line-height: 1.75;
    margin: 0 0 1.5rem;
    /* mb-6 */ }
  .report h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 3rem 0 1.5rem;
    /* mt-12 mb-6 */ }
  .report strong {
    font-weight: 700;
    color: var(--gray-900); }
  .report ul {
    list-style: disc;
    padding-left: 1.5rem;
    /* pl-6 */
    margin: 0 0 3rem;
    /* mb-12 */
    color: var(--gray-700);
    /* space-y-2 相当 */ }
    .report ul li {
      margin: .5rem 0; }
  .report code {
    background: var(--gray-100);
    padding: .25rem .5rem;
    /* px-2 py-1 */
    border-radius: .375rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--gray-900);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: nowrap; }
  .report .og-table {
    min-width: 100%;
    width: 100%;
    border: 1px solid var(--gray-200);
    border-collapse: collapse;
    background: #fff;
    margin: 0 0 3rem;
    /* mb-12 */ }
    .report .og-table thead {
      background: var(--gray-50); }
      .report .og-table thead th {
        text-align: left;
        font-weight: 700;
        color: var(--gray-900);
        padding: .75rem 1.5rem;
        /* py-3 px-6 */
        border-bottom: 1px solid var(--gray-200);
        white-space: nowrap; }
    .report .og-table tbody {
      /* 2列目は強調（Tailwind版で font-medium text-gray-900 だった所） */ }
      .report .og-table tbody td {
        padding: 1rem 1.5rem;
        /* py-4 px-6 */
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-200);
        vertical-align: top; }
      .report .og-table tbody tr:last-child td {
        border-bottom: 0; }
      .report .og-table tbody td:nth-child(2) {
        color: var(--gray-900);
        font-weight: 500; }
  .report .og-table {
    display: table; }

@media (max-width: 720px) {
  .report .og-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .report .og-table thead th {
    min-width: 160px; } }
  .report .report-chart {
    margin: 4rem 0;
    /* my-16 */
    background: var(--gray-50);
    padding: 2rem;
    /* p-8 */
    border-radius: .5rem;
    /* 量産時、canvas の高さはここで決め打ちしてOK */ }
    .report .report-chart h2 {
      margin: 0 0 1rem;
      /* mb-4 */ }
    .report .report-chart .subtle {
      color: var(--gray-600);
      font-size: .875rem;
      line-height: 1.25rem;
      margin: 0 0 1.5rem;
      /* mb-6 */ }
    .report .report-chart canvas {
      display: block;
      width: 100% !important;
      height: 400px !important;
      box-sizing: border-box; }

.share-btn {
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
}

.share-x {
  background: #000;
  color: #fff;
}

.share-line {
  background: #51c153;
  color: #fff;
}

.share-facebook {
  background: #395498;
  color: #fff;
}