/* faq.lancul.com 固有の見た目。色・書体は lancul.com のトークン（../build/kit/tokens.md）に合わせる */
.faq { --faq-ink:#242424; --faq-sub:#575757; --faq-line:#dbe1e1; --faq-ground:#EEEEEE; --faq-accent:#fa3b4e;
  color:var(--faq-ink); font-family:'Noto Sans JP','Noto Sans',sans-serif; background:#fff;
  width:100%; align-self:stretch; padding-top:131px; }  /* ヘッダーは固定（lancul.com 実測 841px〜 131px / 〜840px 60px / 〜540px 55px） */
@media (max-width:840px){ .faq{ padding-top:60px; } }  /* 541〜840px はヘッダー60px（9/14 実測）。〜540px は55px で5px空くだけ */
.faq *{ box-sizing:border-box; }
.faq [hidden]{ display:none !important; }  /* display:flex 等の指定が hidden 属性より優先されてボタンが消えなかった（9/14 実画面で発見） */
.faq a{ color:inherit; }
.faq-wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* 見出し帯＋検索 */
.faq-hero{ background:var(--faq-ground); padding:56px 0 48px; }
.faq-hero--compact{ padding:28px 0 24px; }
.faq-hero__en{ font-family:Poppins,sans-serif; font-weight:700; font-size:56px; line-height:1; margin:0; letter-spacing:.01em; }
.faq-hero__ja{ font-size:14px; font-weight:700; margin:12px 0 24px; display:flex; align-items:center; gap:10px; }
.faq-hero__ja::before{ content:""; width:24px; height:1px; background:var(--faq-ink); }
.faq-hero--compact .faq-hero__en{ font-size:28px; }
.faq-hero--compact .faq-hero__ja{ margin:6px 0 14px; }
.faq-search{ display:flex; max-width:640px; background:#fff; border:1px solid var(--faq-line); border-radius:999px; overflow:hidden; }
.faq-search__input{ flex:1; min-width:0; border:0; padding:14px 20px; font-size:16px; font-family:inherit; background:transparent; }
.faq-search__input:focus{ outline:none; }
.faq-search:focus-within{ border-color:var(--faq-ink); }
.faq-search__btn{ border:0; background:var(--faq-ink); color:#fff; width:56px; cursor:pointer; display:grid; place-items:center; }
@media (max-width:600px){ .faq-hero{ padding:36px 0 32px; } .faq-hero__en{ font-size:40px; } }

/* トップのカテゴリ */
.faq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; padding:48px 0 72px; }
@media (max-width:600px){ .faq-grid{ grid-template-columns:1fr; padding:28px 0 48px; } }
.faq-card{ border:1px solid var(--faq-line); border-radius:12px; padding:24px; display:flex; flex-direction:column; background:#fff; }
.faq-card__head{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; margin-bottom:12px; }
.faq-card__icon{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--faq-ground); display:grid; place-items:center; color:var(--faq-accent); }
.faq-card__icon svg{ width:18px; height:18px; fill:currentColor; }
.faq-card__title{ display:block; font-weight:700; font-size:17px; line-height:1.4; }
.faq-card__desc{ display:block; font-size:13px; color:var(--faq-sub); margin-top:4px; line-height:1.5; }
.faq-card__head:hover .faq-card__title{ text-decoration:underline; }
.faq-card__more{ margin-top:auto; padding-top:12px; font-size:14px; font-weight:700; color:var(--faq-accent); text-decoration:none; }
.faq-card__more::after{ content:" →"; }

/* 記事の一覧 */
.faq-list{ list-style:none; margin:0; padding:0; }
.faq-list li{ margin:0; }
.faq-list__link{ display:block; padding:8px 0; font-size:15px; line-height:1.6; text-decoration:none; }
.faq-list__link:hover{ text-decoration:underline; }
.faq-list--bordered .faq-list__link{ padding:14px 28px 14px 0; border-bottom:1px solid var(--faq-line); position:relative; }
.faq-list--bordered .faq-list__link::after{ content:"›"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--faq-sub); font-size:20px; }

/* 2カラム（本文＋カテゴリ） */
.faq-cols{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; padding-top:32px; padding-bottom:72px; }
@media (max-width:900px){ .faq-cols{ grid-template-columns:1fr; gap:32px; } }
.faq-crumbs{ font-size:13px; color:var(--faq-sub); margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.faq-crumbs a{ text-decoration:none; } .faq-crumbs a:hover{ text-decoration:underline; }
.faq-crumbs__sep{ color:#aaaaaa; }
.faq-title{ font-size:28px; line-height:1.45; font-weight:700; margin:0 0 12px; }
@media (max-width:600px){ .faq-title{ font-size:22px; } }
.faq-lead{ color:var(--faq-sub); margin:0 0 24px; }
.faq-sub{ margin-top:32px; }
.faq-sub__title{ font-size:18px; font-weight:700; margin:0 0 4px; padding-left:12px; border-left:4px solid var(--faq-accent); }

.faq-side__title{ font-weight:700; font-size:14px; margin:0 0 8px; }
.faq-side__list{ list-style:none; margin:0 0 24px; padding:0; border-top:1px solid var(--faq-line); }
.faq-side__list a{ display:block; padding:12px 4px; border-bottom:1px solid var(--faq-line); font-size:14px; text-decoration:none; }
.faq-side__list a:hover, .faq-side__list a[aria-current]{ color:var(--faq-accent); font-weight:700; }
.faq-side__help{ background:var(--faq-ground); border-radius:12px; padding:18px; font-size:14px; line-height:1.7; }
.faq-side__help p{ margin:0; }
.faq-side__help-title{ font-weight:700; margin-bottom:6px !important; }

/* 記事本文 */
.faq-body{ font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.faq-body p{ margin:0 0 1.1em; }
.faq-body h2,.faq-body h3,.faq-body h4{ line-height:1.5; margin:1.8em 0 .6em; }
.faq-body h3{ font-size:19px; } .faq-body h4{ font-size:17px; }
.faq-body a{ color:#1a6fd1; text-decoration:underline; }
.faq-body ul,.faq-body ol{ padding-left:1.4em; margin:0 0 1.1em; }
.faq-body li{ margin:.3em 0; }
.faq-body img{ max-width:100%; height:auto; border-radius:8px; border:1px solid var(--faq-line); vertical-align:top; margin:6px 6px 6px 0; }
.faq-body hr{ border:0; border-top:1px solid var(--faq-line); margin:2em 0; }
.faq-body table{ border-collapse:collapse; width:100%; margin:0 0 1.2em; font-size:14px; display:block; overflow-x:auto; }
.faq-body td,.faq-body th{ border:1px solid var(--faq-line); padding:8px 10px; }
.faq-callout{ border-radius:10px; padding:16px 20px; margin:0 0 1.2em; }
.faq-callout p:last-child{ margin-bottom:0; }
.faq-callout--tip{ background:#fff1f2; border-left:4px solid var(--faq-accent); }
.faq-callout--note{ background:#fff6ec; border-left:4px solid #fd8f3e; }
.faq-callout--box{ background:#f5f5f5; border:1px solid var(--faq-line); font-size:14px; }
.faq-updated{ font-size:12px; color:#888888; margin:24px 0 0; }

/* お役に立ちましたか */
.faq-feedback{ margin-top:32px; border:1px solid var(--faq-line); border-radius:12px; padding:20px; text-align:center; }
.faq-feedback__q{ font-weight:700; margin:0 0 12px; }
.faq-feedback__btns{ display:flex; justify-content:center; gap:12px; }
.faq-feedback__btn{ min-width:112px; padding:10px 20px; border-radius:999px; border:1px solid var(--faq-ink); background:#fff; font:inherit; font-weight:700; cursor:pointer; }
.faq-feedback__btn:hover{ background:var(--faq-ink); color:#fff; }
.faq-feedback__thanks{ margin:0; font-size:14px; color:var(--faq-sub); }

.faq-related{ margin-top:40px; }
.faq-related__title{ font-size:18px; font-weight:700; margin:0 0 4px; }
.faq-results__snippet{ display:block; font-size:13px; color:var(--faq-sub); margin-top:4px; }
.faq-results__empty{ color:var(--faq-sub); }
