@charset "utf-8";

/* よくあるご質問 — page-specific styles */
.faq-content { padding: var(--asb-section-space-standard-top) 0 var(--asb-section-space-standard-bottom); background: #fff; }
.faq-content__lead { max-width: 680px; margin: 0 auto 58px; color: #4c5b66; font-size: 14px; line-height: 2; letter-spacing: .035em; text-align: center; }
.faq-content__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.faq-toc { position: sticky; top: 112px; padding: 24px 0; }
.faq-toc__label { margin: 0 0 15px; color: var(--asb-blue); font: 400 10px/1 "Oswald", sans-serif; letter-spacing: .2em; }
.faq-toc ol { display: grid; margin: 0; padding: 0; list-style: none; }
.faq-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 13px 12px; border-left: 2px solid rgba(23,50,77,.13); color: #53606b; font-size: 12px; line-height: 1.65; letter-spacing: .025em; text-decoration: none; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.faq-toc a span { color: #d78a18; font: 400 10px/1.7 "Oswald", sans-serif; letter-spacing: .08em; }
.faq-toc a:hover, .faq-toc a:focus-visible { border-left-color: var(--asb-blue); background: rgba(255,255,255,.72); color: var(--asb-navy); outline: none; }
.faq-groups { min-width: 0; }
.faq-group { scroll-margin-top: 105px; }
.faq-group + .faq-group { margin-top: 82px; }
.faq-group__heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 14px; padding: 0 0 0 18px; }
.faq-group__heading > span { align-self: center; color: #d78a18; font: 300 28px/1 "Oswald", sans-serif; letter-spacing: -.02em; transform: translateY(1px); }
.faq-group__heading h2 { margin: 0; padding: 0; color: var(--asb-navy); font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: .055em; white-space: nowrap; }
.faq-item { border-bottom: 1px solid rgba(23,50,77,.16); background: rgba(255,255,255,.76); }
.faq-item:first-of-type { border-top: 1px solid rgba(23,50,77,.16); }
.faq-item summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 10px; align-items: center; min-height: 56px; padding: 9px 18px; color: var(--asb-navy); cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; list-style: none; transition: background-color .2s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item summary:focus-visible, .faq-item[open] summary { background: rgba(234,242,252,.62); outline: none; }
.faq-item__mark, .faq-item__answer > span { color: var(--asb-blue); font: 500 16px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.faq-item summary i { position: relative; width: 26px; height: 26px; border: 1px solid rgba(23,50,77,.2); border-radius: 50%; transition: transform .25s ease, background-color .2s ease, border-color .2s ease; }
.faq-item summary i::before, .faq-item summary i::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: var(--asb-navy); content: ""; transform: translate(-50%, -50%); }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .2s ease; }
.faq-item[open] summary i { border-color: var(--asb-yellow); background: var(--asb-yellow); transform: rotate(180deg); }
.faq-item[open] summary i::after { opacity: 0; }
.faq-item__answer { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 8px 54px 13px 18px; background: rgba(255,255,255,.76); }
.faq-item__answer > span { color: #b58300; padding-top: 4px; }
.faq-item__answer p { margin: 0; color: #42505d; font-size: 13px; line-height: 1.85; letter-spacing: .035em; }
@media (max-width: 820px) { .faq-content__layout { grid-template-columns: 1fr; gap: 28px; } .faq-toc { position: relative; top: auto; overflow-x: auto; margin: 0 -24px; padding: 0 24px 5px; } .faq-toc__label { margin-bottom: 11px; } .faq-toc ol { display: flex; gap: 8px; width: max-content; } .faq-toc a { display: flex; gap: 8px; align-items: center; padding: 10px 13px; border: 1px solid rgba(23,50,77,.16); border-radius: 999px; background: rgba(255,255,255,.75); white-space: nowrap; } .faq-group + .faq-group { margin-top: 64px; } }
@media (max-width: 540px) { .faq-content__lead { margin-bottom: 30px; font-size: 13px; line-height: 1.9; } .faq-content__lead br { display: none; } .faq-content { padding-top: 58px; padding-bottom: 60px; } .faq-content__layout { gap: 25px; } .faq-group { scroll-margin-top: 80px; } .faq-group + .faq-group { margin-top: 54px; } .faq-group__heading { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; margin-bottom: 13px; padding: 0 0 0 12px; } .faq-group__heading > span { font-size: 23px; } .faq-group__heading h2 { font-size: 16px; letter-spacing: .025em; } .faq-item summary { grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 9px; min-height: 52px; padding: 10px 12px; font-size: 13.5px; line-height: 1.55; } .faq-item__mark, .faq-item__answer > span { font-size: 15px; } .faq-item summary i { width: 24px; height: 24px; } .faq-item__answer { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 8px 40px 13px 12px; } .faq-item__answer p { font-size: 12.5px; line-height: 1.75; } }