/* ==========================================
   受託解析Quick
   SERVICE DETAIL DESIGN
========================================== */

.sd-page {
    --sd-blue: #0988ef;
    --sd-navy: #102f60;
    --sd-text: #385777;
    --sd-muted: #738ca8;
    --sd-line: #dceaf7;
  
    width: 100%;
    min-width: 0;
    padding-bottom: 80px;
    background: #f6fbff;
    color: var(--sd-navy);
  }
  
  .sd-page *,
  .sd-page *::before,
  .sd-page *::after {
    box-sizing: border-box;
  }
  
  .sd-container {
    width: min(100% - 36px, 1200px);
    margin-inline: auto;
  }
  
  /* ==========================================
     HERO
  ========================================== */
  
  .sd-hero {
    min-height: 285px;
    padding: 27px 0 58px;
    background-color: #eaf7ff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .sd-back {
    margin-bottom: 23px;
  }
  
  .sd-back a {
    color: #1686e3;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
  }
  
  .sd-back a:hover {
    text-decoration: underline;
  }
  
  .sd-hero-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
  }
  
  .sd-hero-main {
    flex: 1;
    min-width: 0;
    max-width: 860px;
  }
  
  .sd-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #168cf0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
  }
  
  .sd-hero-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  
  .sd-hero h1 {
    margin: 0;
    color: #0d2d65;
    font-size: clamp(25px, 2.7vw, 35px);
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  
  .sd-company-name,
  .sd-service-name {
    display: block;
  }
  
  .sd-favorite {
    flex-shrink: 0;
  }
  
  .sd-hero-lead {
    margin: 13px 0;
    color: #58789b;
    font-size: 13px;
    line-height: 1.7;
  }
  
  .sd-company-other {
    margin-bottom: 14px;
  }
  
  .sd-company-other a,
  .sd-source-meta a {
    color: #087bdc;
    font-size: 12px;
    font-weight: 800;
  }
  
  .sd-order-type {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin: 11px 0;
    color: #577493;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .sd-order-type strong {
    color: #234e78;
  }
  
  .sd-performer {
    margin: 11px 0;
    color: #567596;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .sd-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 13px;
    color: #587898;
    font-size: 12px;
    line-height: 1.7;
  }
  
  .sd-source-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 16px;
    color: #8396ab;
    font-size: 11px;
  }
  
  /* ロゴ */
  .sd-hero-logos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 190px;
    flex-shrink: 0;
  }
  
  .sd-company-logo,
  .sd-service-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    padding: 14px;
    border: 1px solid #dcebf8;
    border-radius: 12px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 5px 19px rgba(24,94,169,.05);
  }
  
  .sd-company-logo img,
  .sd-service-logo img {
    display: block;
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
  /* ==========================================
     2カラム
  ========================================== */
  
  .sd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 18px;
    margin-top: -10px;
  }
  
  .sd-main {
    min-width: 0;
  }
  
  .sd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  
  /* ==========================================
     サービス紹介
  ========================================== */
  
  .sd-introduction,
  .sd-siblings {
    margin-bottom: 17px;
    padding: 19px 21px;
    border: 1px solid #cfe7f9;
    border-radius: 5px;
    background: #ebf7ff;
  }
  
  .sd-introduction {
    display: flex;
    align-items: flex-start;
    gap: 13px;
  }
  
  .sd-introduction-icon {
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #fff;
    color: #138ae9;
  }
  
  .sd-introduction-icon svg {
    width: 21px;
    height: 21px;
  }
  
  .sd-introduction h2 {
    margin: 0 0 6px;
    color: #15457c;
    font-size: 14px;
    font-weight: 800;
  }
  
  .sd-introduction p {
    margin: 0;
    color: #557896;
    font-size: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  
  .sd-siblings {
    background: #f5faff;
  }
  
  .sd-siblings > strong {
    color: #195082;
    font-size: 13px;
  }
  
  .sd-siblings p {
    margin: 9px 0;
    color: #577594;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .sd-sibling-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .sd-sibling-link {
    color: #087fe3;
    font-size: 12px;
    font-weight: 800;
  }
  
  /* ==========================================
     共通カード
  ========================================== */
  
  .sd-card {
    min-width: 0;
    margin-bottom: 17px;
    padding: 22px;
    border: 1px solid #deebf8;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(32,102,171,.06);
  }
  
  .sd-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 19px;
  }
  
  .sd-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: linear-gradient(140deg,#2babff,#0878e5);
    color: #fff;
  }
  
  .sd-heading-icon svg {
    width: 21px;
    height: 21px;
  }
  
  .sd-card-heading h2 {
    margin: 0;
    color: #143c6d;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
  }
  
  .sd-card-heading p {
    margin: 4px 0 0;
    color: #8095ac;
    font-size: 11px;
    line-height: 1.7;
  }
  
  .sd-heading-condition {
    color: #395b7d;
    font-size: 14px;
  }
  
  /* ==========================================
     参考価格
  ========================================== */
  
  .sd-estimate-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 17px;
    padding: 14px 17px;
    border: 1px solid #deedfa;
    border-radius: 5px;
    background: #f4faff;
  }
  
  .sd-price-label {
    color: #6a88a4;
    font-size: 11px;
    font-weight: 800;
  }
  
  .sd-page .sd-estimate-price .price {
    margin: 0;
    color: #0a367a;
    font-size: clamp(23px, 2.6vw, 32px);
    font-weight: 900;
    line-height: 1.5;
  }
  
  .sd-page .sd-estimate-quote .price {
    font-size: 22px;
  }
  
  /* ==========================================
     テーブル共通
  ========================================== */
  
  .sd-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c8dff1 #f2f8ff;
  }
  
  .sd-page .sd-table {
    width: 100%;
    min-width: 660px;
    margin: 0;
    border: 1px solid #dce8f5;
border-collapse: collapse;
    border-spacing: 0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }
  
  .sd-page .sd-table th,
  .sd-page .sd-table td {
    padding: 11px 12px;
    border: 0;
    border-right: 1px solid #e3ecf6;
    border-bottom: 1px solid #e3ecf6;
    color: #3e5b7b;
    font-size: 11px;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  
  .sd-page .sd-table thead th {
    background: #edf6ff;
    color: #20446b;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .sd-page .sd-table tr > :last-child {
    border-right: 0;
  }
  
  .sd-page .sd-table tbody tr:last-child > th,
  .sd-page .sd-table tbody tr:last-child > td {
    border-bottom: 0;
  }
  
  .sd-page .sd-table tbody tr:nth-child(even) td {
    background: #fafcff;
  }
  
  .sd-page .sd-table a {
    color: #087fe5;
    font-weight: 700;
    text-underline-offset: 2px;
  }
  
  .sd-page .sd-table td strong {
    color: #1d416a;
  }
  
  .sd-table-secondary,
  .sd-table-help {
    display: block;
    margin-top: 4px;
    color: #8194aa;
    font-size: 10px;
    line-height: 1.7;
    font-weight: normal;
  }
  
  .sd-table-amount {
    color: #174b83 !important;
    font-weight: 800;
    white-space: nowrap;
  }
  
  /* 登録料金は横スクロール */
  .sd-page .sd-all-rules-table {
    min-width: 960px;
  }
  
  /* ==========================================
     仕様
  ========================================== */
  
  .sd-spec-intro {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #d8eafa;
    border-radius: 8px;
    background: #edf7ff;
  }
  
  .sd-spec-intro strong {
    display: block;
    margin-bottom: 6px;
    color: #174b7f;
    font-size: 12px;
  }
  
  .sd-spec-intro p {
    margin: 0;
    color: #607e9d;
    font-size: 11px;
    line-height: 1.85;
  }
  
  .sd-page .sd-spec-table {
    min-width: 0;
  }
  
  .sd-page .sd-spec-table th {
    width: 34%;
    background: #f1f7fd;
    color: #27496b;
    font-weight: 800;
  }
  
  .sd-page .sd-spec-table td {
    background: #fff;
  }
  
  .sd-page .sd-spec-table .sd-group-row th {
    width: auto;
    background: #e8f4ff;
    color: #1458a0;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
  }
  
  /* ==========================================
     サンプル
  ========================================== */
  
  .sd-sample-forms {
    margin-top: 22px;
  }
  
  .sd-sample-detail {
    margin: 0;
    padding-top: 21px;
    border-top: 1px solid #e6eff8;
  }
  
  .sd-sample-heading {
    margin-bottom: 15px;
  }
  
  .sd-sample-heading h3 {
    margin: 0 0 6px;
    color: #14579d;
    font-size: 16px;
    font-weight: 800;
  }
  
  .sd-sample-heading p {
    margin: 0;
    color: #7b91aa;
    font-size: 11px;
  }
  
  .sd-sample-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 13px;
    padding: 13px;
    border-radius: 9px;
    background: #edf7ff;
  }
  
  .sd-sample-note > span {
    color: #168cf0;
    font-size: 17px;
  }
  
  .sd-sample-note p,
  .sd-sample-empty {
    margin: 0;
    color: #6582a0;
    font-size: 11px;
    line-height: 1.85;
  }
  
  /* ==========================================
     出典
  ========================================== */
  
  .sd-source-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .sd-source-list li {
    padding: 13px 15px;
    border: 1px solid #e3edf7;
    border-radius: 5px;
    background: #f9fcff;
  }
  
  .sd-source-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .sd-source-title a {
    color: #087de3;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.7;
  }
  
  .sd-source-details {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    margin-top: 6px;
    color: #8498ad;
    font-size: 10px;
  }
  
  .sd-source-list li > p {
    margin: 7px 0 0;
    color: #6e88a1;
    font-size: 11px;
    line-height: 1.8;
  }
  
  /* ==========================================
     サイドバー
  ========================================== */
  
  .sd-side-card {
    min-width: 0;
    padding: 20px 18px;
    border: 1px solid #deebf7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(35,101,171,.05);
  }
  
  .sd-side-card h2 {
    margin: 0 0 11px;
    color: #183e6c;
    font-size: 15px;
    font-weight: 800;
    margin-top: 0 !important;
  }
  
  .sd-side-card > p {
    margin: 0 0 15px;
    color: #6c859e;
    font-size: 11px;
    line-height: 1.8;
  }
  
  /* CTA */
  .sd-cta-card {
    background: linear-gradient(180deg,#ffffff,#f1f9ff);
  }
  
  .sd-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg,#2eabff,#087ef0);
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 7px 17px rgba(19,128,222,.16);
  }
  
  .sd-cta-button:hover {
    filter: brightness(.97);
  }
  
  .sd-cta-unavailable {
    color: #9a6844 !important;
  }
  
  .sd-cta-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 11px;
    margin-top: 13px;
  }
  
  .sd-cta-notes span {
    color: #71889d;
    font-size: 10px;
  }
  
  .sd-cta-notes span::before {
    content: "✓";
    margin-right: 4px;
    color: #159b7c;
    font-weight: 800;
  }
  
  /* サイドバー見出し */
  .sd-side-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px !important;
  }
  
  .sd-side-title-icon {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #e9f5ff;
    color: #168cf0;
    font-size: 17px;
    font-weight: 800;
  }
  
  /* フロー */
  .sd-flow {
    position: relative;
    margin: 0;
    padding: 0 0 0 2px;
    list-style: none;
  }
  
  .sd-flow::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 30px;
    left: 15px;
    width: 2px;
    background: #d8eafb;
  }
  
  .sd-flow li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 25px;
  }
  
  .sd-flow li:last-child {
    margin-bottom: 0;
  }
  
  .sd-flow-number {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #168cf0;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }
  
  .sd-flow li div {
    min-width: 0;
  }
  
  .sd-flow strong {
    display: block;
    margin-bottom: 5px;
    color: #2b4d71;
    font-size: 12px;
  }
  
  .sd-flow p {
    margin: 0;
    color: #7b90a7;
    font-size: 11px;
    line-height: 1.8;
  }
  
  /* 安心カード */
  .sd-safety-card {
    border-color: #d7efe6;
    background: #f1fbf7;
  }
  
  .sd-safety-card .sd-side-title {
    color: #1c775e;
  }
  
  .sd-safety-card .sd-side-title-icon {
    background: #dff7ee;
    color: #16a77e;
  }
  
  .sd-check-list,
  .sd-tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .sd-check-list li,
  .sd-tip-list li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 21px;
    color: #5d768f;
    font-size: 11px;
    line-height: 1.8;
  }
  
  .sd-check-list li:last-child,
  .sd-tip-list li:last-child {
    margin-bottom: 0;
  }
  
  .sd-check-list li::before {
    content: "✓";
    position: absolute;
    top: 2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #16a87a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
  }
  
  .sd-tip-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #168cf0;
    font-weight: 800;
  }
  
  .sd-hint-icon {
    background: #fff4d7;
    color: #ecb31d;
  }
  
  /* ==========================================
     タブレット
  ========================================== */
  
  @media (max-width: 1000px) {
    .sd-layout {
      grid-template-columns: minmax(0,1fr) 250px;
      gap: 14px;
    }
  
    .sd-card {
      padding: 17px;
    }
  
    .sd-side-card {
      padding: 17px 14px;
    }
  
    .sd-hero-logos {
      width: 150px;
    }
  }
  
  /* ==========================================
     スマートフォン
  ========================================== */
  
  @media (max-width: 760px) {
    .sd-page {
      padding-bottom: 50px;
    }
  
    .sd-container {
      width: calc(100% - 26px);
    }
  
    .sd-hero {
      padding: 22px 0 42px;
      background-position: 70% center;
    }
  
    .sd-back {
      margin-bottom: 15px;
    }
  
    .sd-hero-content {
      flex-direction: column;
      gap: 17px;
    }
  
    .sd-hero h1 {
      font-size: 24px;
    }
  
    .sd-hero-lead {
      font-size: 12px;
    }
  
    .sd-hero-logos {
      flex-direction: row;
      width: 100%;
    }
  
    .sd-company-logo,
    .sd-service-logo {
      flex: 1;
      min-width: 0;
      min-height: 75px;
    }
  
    .sd-company-logo img,
    .sd-service-logo img {
      max-height: 70px;
    }
  
    .sd-layout {
      grid-template-columns: 1fr;
      gap: 15px;
      margin-top: -8px;
    }
  
    .sd-card {
      margin-bottom: 14px;
      padding: 17px 13px;
      border-radius: 11px;
    }
  
    .sd-card-heading {
      gap: 10px;
    }
  
    .sd-heading-icon {
      flex-basis: 34px;
      width: 34px;
      height: 34px;
    }
  
    .sd-heading-icon svg {
      width: 19px;
      height: 19px;
    }
  
    .sd-card-heading h2 {
      font-size: 17px;
    }
  
    .sd-heading-condition {
      font-size: 12px;
    }
  
    .sd-page .sd-table th,
    .sd-page .sd-table td {
      padding: 9px 10px;
      font-size: 10px;
    }
  
    .sd-page .sd-spec-table th {
      width: 38%;
    }
  
    .sd-introduction,
    .sd-siblings {
      padding: 14px;
    }
  
    .sd-sidebar {
      gap: 13px;
    }
  
    .sd-side-card {
      padding: 19px;
    }
  }
  
  .sd-page a:focus-visible,
  .sd-page button:focus-visible {
    outline: 3px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .sd-page *,
    .sd-page *::before,
    .sd-page *::after {
      transition: none !important;
    }
  }