/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 15 2026 | 07:26:39 */
/* 株式会社スマート Q&Aページ専用CSS
 * Simple Custom CSS and JS の「Add Custom CSS」へ貼り付けてください。
 * styleタグは付けません。
 */

#smart-faq {
    --smart-navy: #17336f;
    --smart-blue: #2b61a8;
    --smart-blue-soft: #edf4fb;
    --smart-ink: #292f38;
    --smart-muted: #68717d;
    --smart-line: #dce3eb;
    --smart-white: #ffffff;
    --smart-warn: #b54132;
    --smart-warn-soft: #fff4f1;
    color: var(--smart-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }

  #smart-faq,
  #smart-faq * {
    box-sizing: border-box;
  }

  #smart-faq a {
    color: var(--smart-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  #smart-faq a:hover,
  #smart-faq a:focus-visible {
    color: var(--smart-navy);
  }

  #smart-faq .smart-faq-intro {
    margin: 0 0 32px;
    padding: 26px 28px;
    border-left: 5px solid var(--smart-navy);
    background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%);
  }

  #smart-faq .smart-faq-eyebrow {
    margin: 0 0 8px;
    color: var(--smart-navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  #smart-faq .smart-faq-lead {
    margin: 0;
    font-size: 17px;
  }

  #smart-faq .smart-faq-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 14px 0 0;
    color: var(--smart-muted);
    font-size: 13px;
  }

  #smart-faq .smart-faq-tools {
    display: none;
    margin: 0 0 26px;
    padding: 18px;
    border: 1px solid var(--smart-line);
    background: var(--smart-white);
  }

  #smart-faq .smart-faq-tools.is-ready {
    display: block;
  }

  #smart-faq .smart-faq-search-label {
    display: block;
    margin-bottom: 7px;
    color: var(--smart-navy);
    font-size: 14px;
    font-weight: 700;
  }

  #smart-faq .smart-faq-search-row {
    display: flex;
    gap: 8px;
  }

  #smart-faq .smart-faq-search {
    width: 100%;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid #aeb8c5;
    border-radius: 3px;
    background: #fff;
    color: var(--smart-ink);
    font: inherit;
    line-height: 1.5;
  }

  #smart-faq .smart-faq-search:focus {
    border-color: var(--smart-blue);
    outline: 3px solid rgba(43, 97, 168, 0.18);
  }

  #smart-faq .smart-faq-button {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--smart-navy);
    border-radius: 3px;
    background: var(--smart-white);
    color: var(--smart-navy);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
  }

  #smart-faq .smart-faq-button:hover,
  #smart-faq .smart-faq-button:focus-visible {
    background: var(--smart-navy);
    color: #fff;
  }

  #smart-faq .smart-faq-tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  #smart-faq .smart-faq-result {
    min-height: 1.5em;
    margin: 8px 0 0;
    color: var(--smart-muted);
    font-size: 13px;
  }

  #smart-faq .smart-faq-nav {
    margin: 0 0 42px;
    padding: 22px;
    border: 1px solid var(--smart-line);
    background: #fafbfd;
  }

  #smart-faq .smart-faq-nav-title {
    margin: 0 0 14px;
    color: var(--smart-navy);
    font-size: 17px;
    font-weight: 700;
  }

  #smart-faq .smart-faq-nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #smart-faq .smart-faq-nav-list a {
    display: flex;
    gap: 9px;
    align-items: baseline;
    text-decoration: none;
  }

  #smart-faq .smart-faq-nav-list a::before {
    content: "›";
    color: var(--smart-blue);
    font-weight: 700;
  }

  #smart-faq .smart-faq-section {
    margin: 0 0 46px;
    scroll-margin-top: 24px;
  }

  #smart-faq .smart-faq-section-title {
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 10px 20px;
    border-bottom: 2px solid var(--smart-line);
    color: var(--smart-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
  }

  #smart-faq .smart-faq-section-title::before {
    position: absolute;
    top: 0.48em;
    left: 0;
    width: 9px;
    height: 9px;
    background: var(--smart-navy);
    content: "";
  }

  #smart-faq .smart-faq-item {
    margin: 0 0 12px;
    border: 1px solid var(--smart-line);
    border-radius: 3px;
    background: var(--smart-white);
  }

  #smart-faq .smart-faq-item[open] {
    border-color: #bac9da;
    box-shadow: 0 6px 18px rgba(23, 51, 111, 0.06);
  }

  #smart-faq .smart-faq-question {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 22px;
    gap: 10px;
    align-items: center;
    padding: 16px 18px;
    color: var(--smart-ink);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.65;
    list-style: none;
  }

  #smart-faq .smart-faq-question::-webkit-details-marker {
    display: none;
  }

  #smart-faq .smart-faq-question:hover {
    background: #f8fafc;
  }

  #smart-faq .smart-faq-question:focus-visible {
    outline: 3px solid rgba(43, 97, 168, 0.3);
    outline-offset: 2px;
  }

  #smart-faq .smart-faq-q {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--smart-navy);
    color: #fff;
    font-size: 13px;
    letter-spacing: -0.02em;
  }

  #smart-faq .smart-faq-icon {
    position: relative;
    width: 18px;
    height: 18px;
  }

  #smart-faq .smart-faq-icon::before,
  #smart-faq .smart-faq-icon::after {
    position: absolute;
    top: 8px;
    left: 2px;
    width: 14px;
    height: 2px;
    background: var(--smart-navy);
    content: "";
    transition: transform 0.2s ease;
  }

  #smart-faq .smart-faq-icon::after {
    transform: rotate(90deg);
  }

  #smart-faq .smart-faq-item[open] .smart-faq-icon::after {
    transform: rotate(0deg);
  }

  #smart-faq .smart-faq-answer {
    position: relative;
    margin: 0 18px 18px 70px;
    padding: 17px 20px;
    border-left: 3px solid #9db4cf;
    background: var(--smart-blue-soft);
  }

  #smart-faq .smart-faq-answer::before {
    position: absolute;
    top: 15px;
    left: -52px;
    color: var(--smart-blue);
    content: "A";
    font-size: 21px;
    font-weight: 700;
  }

  #smart-faq .smart-faq-answer p {
    margin: 0 0 0.75em;
  }

  #smart-faq .smart-faq-answer p:last-child {
    margin-bottom: 0;
  }

  #smart-faq .smart-faq-note {
    margin-top: 10px !important;
    padding: 10px 12px;
    border-left: 3px solid var(--smart-navy);
    background: #fff;
    font-weight: 700;
  }

  #smart-faq .smart-faq-item--warning {
    border-color: #e7c2ba;
  }

  #smart-faq .smart-faq-item--warning .smart-faq-q {
    background: var(--smart-warn);
  }

  #smart-faq .smart-faq-item--warning .smart-faq-answer {
    border-left-color: var(--smart-warn);
    background: var(--smart-warn-soft);
  }

  #smart-faq .smart-faq-item--warning .smart-faq-answer::before {
    color: var(--smart-warn);
  }

  #smart-faq .smart-faq-empty {
    display: none;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--smart-line);
    background: #fafbfd;
    text-align: center;
  }

  #smart-faq .smart-faq-cta {
    margin-top: 48px;
    padding: 28px;
    background: var(--smart-navy);
    color: #fff;
    text-align: center;
  }

  #smart-faq .smart-faq-cta-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
  }

  #smart-faq .smart-faq-cta p {
    margin: 0 0 16px;
  }

  #smart-faq .smart-faq-cta-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  #smart-faq .smart-faq-cta a {
    display: inline-block;
    min-width: 200px;
    padding: 11px 18px;
    border: 1px solid #fff;
    border-radius: 3px;
    background: #fff;
    color: var(--smart-navy);
    font-weight: 700;
    text-decoration: none;
  }

  #smart-faq .smart-faq-cta a:hover,
  #smart-faq .smart-faq-cta a:focus-visible {
    background: transparent;
    color: #fff;
  }

  @media (max-width: 700px) {
    #smart-faq {
      font-size: 15px;
      line-height: 1.8;
    }

    #smart-faq .smart-faq-intro,
    #smart-faq .smart-faq-nav,
    #smart-faq .smart-faq-cta {
      padding: 20px;
    }

    #smart-faq .smart-faq-nav-list {
      grid-template-columns: 1fr;
    }

    #smart-faq .smart-faq-search-row {
      align-items: stretch;
      flex-direction: column;
    }

    #smart-faq .smart-faq-question {
      grid-template-columns: 36px 1fr 18px;
      gap: 8px;
      padding: 14px 12px;
    }

    #smart-faq .smart-faq-q {
      width: 34px;
      height: 34px;
      font-size: 12px;
    }

    #smart-faq .smart-faq-answer {
      margin: 0 12px 14px;
      padding: 15px;
    }

    #smart-faq .smart-faq-answer::before {
      display: none;
    }

    #smart-faq .smart-faq-cta a {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #smart-faq .smart-faq-icon::before,
    #smart-faq .smart-faq-icon::after {
      transition: none;
    }
  }
