/* /faq/（よくある質問）only. v0.36.0。
   値はすべて docs/20-共通デザインルール.md（/area/・/flow/ と同じ）。新しい色・角丸・影は足さない。
   共通ヘッダー・フッター・他ページは変更しない。トップ・調律ページの .sp-faq はこのファイルの対象外。 */
.sp-page-faq { --q-navy:#0b2e48; --q-gold:#af8a50; --q-line:#e6dfd1; --q-rule:#c4a57c; --q-muted:#566877; --q-paper:#fffdf8; --q-tint:#f5f2e9; --q-serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif; --q-no:42px; --q-indent:calc(24px + var(--q-no) + 18px); }
.sp-page-faq #sp-main.sp-main { background:var(--q-paper); color:var(--q-navy); font-size:14px; }
.sp-page-faq #sp-main.sp-main .sp-wrap { max-width:1320px; }
.sp-page-faq #sp-main.sp-main h1,.sp-page-faq #sp-main.sp-main h2,.sp-page-faq #sp-main.sp-main h3 { background:none; border:0; padding:0; color:var(--q-navy); font-family:var(--q-serif); font-weight:600; }
.sp-page-faq #sp-main.sp-main h2 { font-size:30px; line-height:1.65; letter-spacing:.03em; margin:0; }
.sp-page-faq #sp-main.sp-main p { line-height:1.9; margin:12px 0; }
.sp-page-faq #sp-main.sp-main figure { margin:0; }
.sp-page-faq #sp-main.sp-main figure img { display:block; width:100%; height:100%; object-fit:cover; }
.sp-page-faq #sp-main.sp-main a:focus-visible,.sp-page-faq #sp-main.sp-main button:focus-visible { outline:3px solid #d59a43; outline-offset:4px; }
.sp-page-faq #sp-main.sp-main [id] { scroll-margin-top:120px; }
.sp-page-faq #sp-main.sp-main .fq-eye { font:italic 12px/1.8 Georgia,serif; letter-spacing:.18em; color:var(--q-gold); margin:0 0 10px; }
.sp-page-faq #sp-main.sp-main .fq-section { padding:46px 0; }

/* FV：/flow/・/area/ と同じ 2 列グリッド・高さ・背景。ボタンは置かない。 */
.sp-page-faq #sp-main.sp-main .fq-hero { background:linear-gradient(110deg,#f5f1e6,#fffef9); }
.sp-page-faq #sp-main.sp-main .fq-hero__grid { display:grid; grid-template-columns:1.08fr 1fr; max-width:1600px; margin:auto; min-height:430px; }
.sp-page-faq #sp-main.sp-main .fq-hero:not(.has-photo) .fq-hero__grid { grid-template-columns:1fr; min-height:300px; }
.sp-page-faq #sp-main.sp-main .fq-hero__copy { display:flex; flex-direction:column; justify-content:center; padding:40px 42px 40px max(28px,calc((100vw - 1260px) / 2)); }
.sp-page-faq #sp-main.sp-main .fq-hero h1 { font-size:clamp(31px,3vw,43px); line-height:1.5; letter-spacing:.05em; margin:4px 0 20px; }
.sp-page-faq #sp-main.sp-main .fq-hero__lead { font-size:14px; line-height:1.95; margin:0; }
.sp-page-faq #sp-main.sp-main .fq-hero__photo { position:relative; min-width:0; overflow:hidden; }
.sp-page-faq #sp-main.sp-main .fq-hero__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fffdf8c0,transparent 35%); pointer-events:none; }
.sp-page-faq #sp-main.sp-main .fq-hero__photo img { position:absolute; inset:0; object-position:60% 55%; }

/* 見出し：カード並び（カテゴリナビ・関連ページ）は中央寄せ・線なし */
.sp-page-faq #sp-main.sp-main .fq-heading { text-align:center; margin-bottom:26px; }
.sp-page-faq #sp-main.sp-main .fq-heading > p:not(.fq-eye) { font-size:13px; line-height:1.9; color:var(--q-muted); margin:12px 0 0; }

/* カテゴリから探す：6 つを横一列（白・細罫線・角なし）。押すと各分類へ移動。 */
.sp-page-faq #sp-main.sp-main .fq-finder { padding-bottom:26px; }
.sp-page-faq #sp-main.sp-main .fq-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; }
.sp-page-faq #sp-main.sp-main .fq-nav li { margin:0; padding:0; }
.sp-page-faq #sp-main.sp-main .fq-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; min-height:112px; padding:18px 10px 16px; border:1px solid var(--q-line); background:#fff; color:var(--q-navy); text-decoration:none; text-align:center; }
.sp-page-faq #sp-main.sp-main .fq-nav a:hover { border-color:var(--q-gold); background:var(--q-paper); }
.sp-page-faq #sp-main.sp-main .fq-nav__icon { flex:0 0 auto; width:34px; height:34px; fill:none; stroke:var(--q-gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.sp-page-faq #sp-main.sp-main .fq-nav__label { font-size:13px; font-weight:600; line-height:1.6; letter-spacing:.03em; }

/* 分類ごとの質問：番号（濃紺の丸＋真鍮の細いリング）→ 明朝の見出し → 短い説明。左寄せ＋真鍮の 2px 縦線。 */
.sp-page-faq #sp-main.sp-main .fq-body { padding-top:20px; }
.sp-page-faq #sp-main.sp-main .fq-cat + .fq-cat { margin-top:48px; }
.sp-page-faq #sp-main.sp-main .fq-cat__head { display:flex; align-items:center; flex-wrap:wrap; column-gap:18px; row-gap:4px; border-left:2px solid var(--q-gold); padding-left:22px; }
.sp-page-faq #sp-main.sp-main .fq-no { flex:0 0 var(--q-no); width:var(--q-no); height:var(--q-no); border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--q-navy); font:17px/1 Georgia,serif; letter-spacing:.02em; box-shadow:0 0 0 3px var(--q-paper),0 0 0 4px var(--q-gold); }
.sp-page-faq #sp-main.sp-main .fq-cat__head h2 { font-size:25px; line-height:1.5; }
.sp-page-faq #sp-main.sp-main .fq-cat__head p { flex:1 1 280px; font-size:13px; line-height:1.8; color:var(--q-muted); margin:0 0 0 12px; }

/* アコーディオン：/piano-transport/・/flow/ の FAQ と同じ白・1px 罫線・＋／−。1 つの枠の中を罫線で区切る。 */
.sp-page-faq #sp-main.sp-main .fq-items { margin:20px 0 0 var(--q-indent); border:1px solid var(--q-line); background:#fff; }
.sp-page-faq #sp-main.sp-main .fq-item + .fq-item { border-top:1px solid var(--q-line); }
.sp-page-faq #sp-main.sp-main h3.fq-q { font-family:inherit; font-size:14px; line-height:1.7; margin:0; }
.sp-page-faq #sp-main.sp-main .fq-q__btn { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; margin:0; padding:15px 22px; border:0; border-radius:0; background:none; color:var(--q-navy); font:inherit; font-weight:600; text-align:left; cursor:pointer; box-shadow:none; }
.sp-page-faq #sp-main.sp-main .fq-q__btn:hover { background:var(--q-paper); }
.sp-page-faq #sp-main.sp-main .fq-q__text { min-width:0; }
.sp-page-faq #sp-main.sp-main .fq-q__icon { position:relative; flex:0 0 12px; width:12px; height:12px; }
.sp-page-faq #sp-main.sp-main .fq-q__icon::before,.sp-page-faq #sp-main.sp-main .fq-q__icon::after { content:""; position:absolute; left:0; top:5px; width:12px; height:2px; background:currentColor; }
.sp-page-faq #sp-main.sp-main .fq-q__icon::after { transform:rotate(90deg); }
.sp-page-faq #sp-main.sp-main .fq-q__btn[aria-expanded="true"] .fq-q__icon::after { display:none; }
.sp-page-faq #sp-main.sp-main .fq-a { padding:0 22px 20px; }
.sp-page-faq #sp-main.sp-main .fq-a[hidden] { display:none; }
html.fq-js .sp-page-faq #sp-main.sp-main .fq-item:not(.is-open) .fq-a { display:none; }
.sp-page-faq #sp-main.sp-main .fq-a p { max-width:880px; font-size:13.5px; line-height:1.95; margin:0; }
.sp-page-faq #sp-main.sp-main .fq-a .fq-a__more { margin-top:10px; font-size:12.5px; }
.sp-page-faq #sp-main.sp-main .fq-a__more a { color:var(--q-navy); text-decoration:none; border-bottom:1px solid var(--q-rule); padding-bottom:1px; }
.sp-page-faq #sp-main.sp-main .fq-a__more a:hover { border-bottom-color:var(--q-navy); }
.sp-page-faq #sp-main.sp-main .fq-a__more span,.sp-page-faq #sp-main.sp-main .fq-cta__sub span { margin-left:8px; color:#ad571d; }

/* 関連ページ：/area/・/flow/ の関連カードと同じ（白・細罫線・角なし・右下の矢印） */
.sp-page-faq #sp-main.sp-main .fq-related { background:#fff; border-top:1px solid var(--q-line); }
.sp-page-faq #sp-main.sp-main .fq-related__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sp-page-faq #sp-main.sp-main .fq-related__list > a { display:flex; flex-direction:column; border:1px solid var(--q-line); padding:22px; text-decoration:none; color:inherit; background:#fff; }
.sp-page-faq #sp-main.sp-main .fq-related__list > a:hover { border-color:var(--q-gold); }
.sp-page-faq #sp-main.sp-main .fq-related h3 { font-size:17px; line-height:1.7; margin:0 0 12px; }
.sp-page-faq #sp-main.sp-main .fq-related p { font-size:12px; line-height:1.9; margin:0 0 12px; color:#586b78; }
.sp-page-faq #sp-main.sp-main .fq-related__list span { color:#ad571d; align-self:flex-end; margin-top:auto; }

/* CTA：/area/・/flow/ と同じ濃紺の面・中央の大きなオレンジボタン・その下に電話。質問だけの方への補助リンク。 */
.sp-page-faq #sp-main.sp-main .fq-cta { padding:44px 0; background:radial-gradient(ellipse at 50% 0,#174863,#06273f); color:#fff; text-align:center; }
.sp-page-faq #sp-main.sp-main .fq-cta h2 { color:#fff; font-size:33px; margin:10px 0 16px; }
.sp-page-faq #sp-main.sp-main .fq-cta .sp-wrap > p:not(.fq-eye):not(.fq-cta__sub) { color:#dfe8ed; font-size:14px; line-height:1.9; margin:0 0 24px; }
.sp-page-faq #sp-main.sp-main .fq-main-cta { display:flex; align-items:center; justify-content:center; gap:24px; max-width:740px; min-height:74px; margin:0 auto 24px; padding:15px 24px; background:linear-gradient(110deg,#dc741a,#bc4e06); border:1px solid #e9bb7f; border-radius:5px; color:#fff; text-decoration:none; font-size:22px; font-weight:700; line-height:1.6; box-shadow:0 5px 14px #7c3f1115; }
.sp-page-faq #sp-main.sp-main .fq-main-cta:hover { background:#a94607; color:#fff; }
.sp-page-faq #sp-main.sp-main .fq-tel { display:flex; align-items:center; justify-content:center; gap:16px; color:#fff; text-decoration:none; }
.sp-page-faq #sp-main.sp-main .fq-tel span { font-size:12px; }
.sp-page-faq #sp-main.sp-main .fq-tel b { font-size:34px; letter-spacing:.03em; white-space:nowrap; }
.sp-page-faq #sp-main.sp-main .fq-phone p { font-size:11px; color:#d8e4eb; margin:6px 0 0; }
.sp-page-faq #sp-main.sp-main .fq-cta .fq-cta__sub { font-size:13px; margin:18px 0 0; }
.sp-page-faq #sp-main.sp-main .fq-cta__sub a { color:#fff; text-decoration:none; border-bottom:1px solid #ffffff66; padding-bottom:1px; }
.sp-page-faq #sp-main.sp-main .fq-cta__sub a:hover { border-bottom-color:#fff; }
.sp-page-faq #sp-main.sp-main .fq-cta__sub span { color:#e9bb7f; }

@media (max-width:1100px) {
 .sp-page-faq #sp-main.sp-main .fq-hero__copy { padding:32px 26px; }
 .sp-page-faq #sp-main.sp-main .fq-nav__label { font-size:12px; }
 .sp-page-faq #sp-main.sp-main .fq-related__list > a { padding:18px 16px; }
}
@media (max-width:899px) {
 .sp-page-faq #sp-main.sp-main .fq-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .sp-page-faq #sp-main.sp-main .fq-nav a { min-height:100px; }
 .sp-page-faq #sp-main.sp-main .fq-nav__label { font-size:13px; }
 .sp-page-faq #sp-main.sp-main .fq-cat__head p { flex-basis:100%; margin-left:calc(var(--q-no) + 18px); }
 .sp-page-faq #sp-main.sp-main .fq-items { margin-left:0; }
}
@media (max-width:800px) {
 .sp-page-faq #sp-main.sp-main .fq-hero__grid { grid-template-columns:1.2fr 1fr; }
 .sp-page-faq #sp-main.sp-main .fq-hero__copy { padding:28px 22px; }
 .sp-page-faq #sp-main.sp-main h2 { font-size:26px; }
}
@media (max-width:767px) {
 .sp-page-faq #sp-main.sp-main .fq-pc { display:none; }
 .sp-page-faq #sp-main.sp-main .fq-related__list { grid-template-columns:1fr; }
}
@media (max-width:600px) {
 .sp-page-faq { --q-no:36px; }
 .sp-page-faq #sp-main.sp-main .fq-section { padding:32px 0; }
 .sp-page-faq #sp-main.sp-main .fq-finder { padding-bottom:18px; }
 .sp-page-faq #sp-main.sp-main .fq-body { padding-top:14px; }
 .sp-page-faq #sp-main.sp-main .fq-hero__grid { grid-template-columns:1fr; min-height:0; }
 .sp-page-faq #sp-main.sp-main .fq-hero__copy { padding:28px 20px; }
 .sp-page-faq #sp-main.sp-main .fq-hero h1 { font-size:30px; }
 .sp-page-faq #sp-main.sp-main .fq-hero__photo { height:220px; }
 .sp-page-faq #sp-main.sp-main .fq-hero__photo::after { display:none; }
 .sp-page-faq #sp-main.sp-main h2 { font-size:23px; }
 .sp-page-faq #sp-main.sp-main .fq-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .sp-page-faq #sp-main.sp-main .fq-nav a { min-height:92px; padding:14px 8px 12px; gap:8px; }
 .sp-page-faq #sp-main.sp-main .fq-nav__icon { width:30px; height:30px; }
 .sp-page-faq #sp-main.sp-main .fq-cat + .fq-cat { margin-top:38px; }
 .sp-page-faq #sp-main.sp-main .fq-cat__head { padding-left:14px; column-gap:12px; }
 .sp-page-faq #sp-main.sp-main .fq-no { font-size:15px; }
 .sp-page-faq #sp-main.sp-main .fq-cat__head h2 { font-size:20px; }
 .sp-page-faq #sp-main.sp-main .fq-cat__head p { margin-left:0; font-size:12.5px; }
 .sp-page-faq #sp-main.sp-main .fq-items { margin-top:16px; }
 .sp-page-faq #sp-main.sp-main .fq-q__btn { padding:14px 16px; gap:14px; }
 .sp-page-faq #sp-main.sp-main .fq-a { padding:0 16px 18px; }
 .sp-page-faq #sp-main.sp-main .fq-related__list > a { padding:20px; position:relative; }
 .sp-page-faq #sp-main.sp-main .fq-related h3 { font-size:18px; margin-bottom:8px; }
 .sp-page-faq #sp-main.sp-main .fq-related p { margin-bottom:0; padding-right:15px; }
 .sp-page-faq #sp-main.sp-main .fq-related__list span { position:absolute; right:20px; top:22px; }
 .sp-page-faq #sp-main.sp-main .fq-cta { padding:34px 0; }
 .sp-page-faq #sp-main.sp-main .fq-cta h2 { font-size:24px; letter-spacing:0; }
 .sp-page-faq #sp-main.sp-main .fq-main-cta { min-height:68px; font-size:20px; gap:20px; }
 .sp-page-faq #sp-main.sp-main .fq-tel { flex-direction:column; gap:4px; }
 .sp-page-faq #sp-main.sp-main .fq-tel b { font-size:30px; }
}