/* ============================================================
   Phase 1 CSS整理方針（表示非変更）
   - 値/セレクタ/クラス名/HTML構造は変更しない
   - カスケード優先順位を維持する
   - セクション見出しで可読性を上げる
   ============================================================ */

/* =========================== [Foundation] Score Up Results（共通） =========================== */
/* ---- 共通カード（[scoreup_box]） ---- */
.sur-box{
  width:200px;
  margin:10px auto;
  border:2px solid var(--color_main, currentColor);
  border-radius:12px;
  padding:10px;
  background:#fff;
  font-family:inherit;
  text-align:center;
  display:grid;
  justify-items:center;

/* 補助調整（互換維持） */
  --img-mt:.5em;
  --img-mb:.2em;
  --row-a-mt:0em; --row-a-mb:0em;  /* A */
  --row-b-mt:0em; --row-b-mb:0em;  /* B */
  --row-c-mt:.0em;--row-c-mb:0em;  /* C */
  --row-d-mt:0em; --row-d-mb:0em;  /* D */
  --fs-a:.75rem;   /* A */
  --fs-b:.875rem;  /* B */
  --fs-c:1.2rem;   /* C */
  --fs-d:1.25rem;  /* D */
  --lh-a:1.5;
  --lh-b:1.5;
  --lh-c:1.0;
  --lh-d:1.5;

  /* カード影 */
  --sur-shadow:0 5px 14px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.06);
  --sur-shadow-hover:0 12px 28px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.08);

  box-shadow:var(--sur-shadow);
  transition:box-shadow .2s ease, transform .2s ease;
  will-change:transform;
}
.sur-box:hover,
.sur-box:focus-within{
  transform:translateY(-1px);
  box-shadow:var(--sur-shadow-hover);
}

/* 補助調整（互換維持） */
.sur-box .sur-img{
  width:150px; height:150px;
  margin:var(--img-mt) auto var(--img-mb);
  display:block;
  border-radius:50%;
  overflow:hidden;
  background:#f5f5f5;
}
.sur-box .sur-img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* 行（row-a/b/c/d） */
.sur-box .line{ margin:0 !important; }
.sur-box .line.row-a{
  font-size:var(--fs-a); color:#555;
  line-height:var(--lh-a) !important;
  margin-top:var(--row-a-mt) !important;
  margin-bottom:var(--row-a-mb) !important;
}
.sur-box .line.row-b{
  font-size:var(--fs-b);
  line-height:var(--lh-b) !important;
  margin-top:var(--row-b-mt) !important;
  margin-bottom:var(--row-b-mb) !important;
}

.sur-box .line.row-c {
  font-size: inherit; /* 親要素のフォントサイズを継承 */
  line-height:var(--lh-c) !important;
  margin-top:var(--row-c-mt) !important;
  margin-bottom:var(--row-c-mb) !important;
}
.sur-box .line.row-d{
  font-size:var(--fs-d); font-weight:700;
  line-height:var(--lh-d) !important;
  margin-top:var(--row-d-mt) !important;
  margin-bottom:var(--row-d-mb) !important;
}
/* 補助調整（互換維持） */
.sur-box .row-x{
  font-size:var(--fs-d); font-weight:700;
  line-height:var(--lh-d) !important;
  margin-top:var(--row-d-mt) !important;
  margin-bottom:var(--row-d-mb) !important;
}

/* 補助調整（互換維持） */
@media (max-width:600px){
/* 補助調整（互換維持） */
  .sur-box:not(.sur-box--voice){
    width:160px;
    box-sizing:border-box;
    --fs-a:13px; --fs-b:15px;
  }
  .sur-box:not(.sur-box--voice) .sur-img{ width:125px; height:125px; }
}

/* 補助調整（互換維持） */
@media (max-width:600px){
  .sur-box--voice{
    width:100% !important;        /* ボックスを横幅いっぱいに */
    max-width:none !important;
    margin:10px auto;
  }
/* 補助調整（互換維持） */
  .sur-sheet .sur-box--voice{
    width:100% !important;
    max-width:100% !important;
  }
/* 補助調整（互換維持） */
  .sur-sheet .sur-sheet-panel{
    width:calc(100vw - 24px);
    max-width:none;
  }
}

/* 補助調整（互換維持） */
@media (hover:none){
  .sur-box:hover{ transform:none; box-shadow:var(--sur-shadow); }
}