.sec_web_faq {
  padding: 78px 40px 84px;
  background: #fff;

  .wrap { margin: 0 auto; max-width: 1360px; }
  .kicker { margin-bottom: 7px; }
  .title-row { display: flex; align-items: end; gap: 30px; }
  h2 { color: #0b2344; font-size: 36px; font-weight: 800; line-height: 1.4em; letter-spacing: -.03em; }
  .title-row p { padding-bottom: 6px; color: #697f99; font-size: 14px; line-height: 1.7em; }

  .list { margin-top: 29px; display: grid; gap: 9px; }

  .item {
    overflow: hidden;
    border: 1px solid #d8e8fa;
    border-radius: 7px;
    background: #fbfdff;

    &[open] { border-color: #9ac7fb; background: #f7fbff; }
  }

  summary {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #143454;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6em;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker { display: none; }
    &:focus-visible { outline: 2px solid #2477ee; outline-offset: -3px; }
    @media (max-width: 600px) { padding: 13px 14px; gap: 12px; font-size: 13px; }
  }

  .q { width: 23px; height: 23px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: #fff; background: #156be8; font-family: var(--font-en); font-size: 12px; font-weight: 700; }
  .plus { position: relative; margin-left: auto; width: 18px; height: 18px; flex-shrink: 0; &::before, &::after { position: absolute; top: 8px; left: 2px; width: 14px; height: 2px; background: #176cec; content: ""; } &::after { transform: rotate(90deg); transition: transform .2s; } .item[open] &::after { transform: rotate(0); } }
  .answer { padding: 0 55px 18px; color: #5a7390; font-size: 13px; line-height: 1.9em; @media (max-width: 600px) { padding: 0 17px 16px 49px; } }

  @media (max-width: 800px) { padding: 65px 28px 70px; .title-row { display: block; } .title-row p { margin-top: 7px; } }
  @media (max-width: 600px) { padding: 55px 18px 60px; h2 { font-size: 28px; } }
}