/* /flow/（ご依頼の流れ）only. v0.35.0 → v0.35.1：色・幅・見出し・カード・CTA を /area/（area.css v0.34.0）と /piano-transport/ の既存値に統一。
   共通ヘッダー・フッター・他ページは変更しない。値の出典は docs/20-共通デザインルール.md。 */
.sp-page-flow { --f-navy:#0b2e48; --f-gold:#af8a50; --f-line:#e6dfd1; --f-rule:#c4a57c; --f-muted:#566877; --f-paper:#fffdf8; --f-tint:#f5f2e9; --f-serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif; --f35-side:380px; --f35-gap:40px; --f35-no:56px; }
.sp-page-flow #sp-main.sp-main { background:var(--f-paper); color:var(--f-navy); font-size:14px; }
.sp-page-flow #sp-main.sp-main .sp-wrap { max-width:1320px; }
.sp-page-flow #sp-main.sp-main h1,.sp-page-flow #sp-main.sp-main h2,.sp-page-flow #sp-main.sp-main h3 { background:none; border:0; padding:0; color:var(--f-navy); font-family:var(--f-serif); font-weight:600; }
.sp-page-flow #sp-main.sp-main h2 { font-size:30px; line-height:1.65; letter-spacing:.03em; margin:0; }
.sp-page-flow #sp-main.sp-main p { line-height:1.9; margin:12px 0; }
.sp-page-flow #sp-main.sp-main figure { margin:0; }
.sp-page-flow #sp-main.sp-main figure img { display:block; width:100%; height:100%; object-fit:cover; }
.sp-page-flow #sp-main.sp-main a:focus-visible,.sp-page-flow #sp-main.sp-main summary:focus-visible { outline:3px solid #d59a43; outline-offset:4px; }
.sp-page-flow #sp-main.sp-main [id] { scroll-margin-top:120px; }
.sp-page-flow #sp-main.sp-main .f35-eye { font:italic 12px/1.8 Georgia,serif; letter-spacing:.18em; color:var(--f-gold); margin:0 0 10px; }
.sp-page-flow #sp-main.sp-main .f35-section { padding:46px 0; }

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

/* 見出し：英字ラベル → 明朝 → 短い説明。左寄せは真鍮の 2px 縦線（/piano-transport/・/price/ と同じ）。 */
.sp-page-flow #sp-main.sp-main .f35-heading { text-align:center; margin-bottom:26px; }
.sp-page-flow #sp-main.sp-main .f35-heading > p:not(.f35-eye) { font-size:13px; line-height:1.9; color:var(--f-muted); margin:12px 0 0; }
.sp-page-flow #sp-main.sp-main .f35-heading--l { text-align:left; border-left:2px solid var(--f-gold); padding-left:22px; }

/* 縦型 6 STEP：このページの個性。番号は濃紺、真鍮は細いリングと線だけ。 */
.sp-page-flow #sp-main.sp-main .f35-steps .f35-heading { margin-bottom:40px; }
.sp-page-flow #sp-main.sp-main .f35-list { list-style:none; margin:0; padding:0; }
.sp-page-flow #sp-main.sp-main .f35-step { position:relative; display:grid; grid-template-columns:var(--f35-side) minmax(0,1fr) var(--f35-side); column-gap:var(--f35-gap); align-items:start; padding-bottom:48px; margin:0; }
.sp-page-flow #sp-main.sp-main .f35-step:last-child { padding-bottom:0; }
.sp-page-flow #sp-main.sp-main .f35-step::before { content:""; position:absolute; left:calc(var(--f35-side) + var(--f35-gap) + var(--f35-no) / 2); top:calc(var(--f35-no) + 10px); bottom:16px; width:1px; background:var(--f-rule); }
.sp-page-flow #sp-main.sp-main .f35-step::after { content:""; position:absolute; left:calc(var(--f35-side) + var(--f35-gap) + var(--f35-no) / 2 - 4px); bottom:8px; border:4px solid transparent; border-top:6px solid var(--f-rule); border-bottom:0; }
.sp-page-flow #sp-main.sp-main .f35-step:last-child::before,.sp-page-flow #sp-main.sp-main .f35-step:last-child::after { content:none; }
.sp-page-flow #sp-main.sp-main .f35-step__main { grid-column:2 / 4; grid-row:1; display:flex; gap:24px; align-items:flex-start; }
.sp-page-flow #sp-main.sp-main .f35-step--r.has-photo .f35-step__main { grid-column:2; }
.sp-page-flow #sp-main.sp-main .f35-no { flex:0 0 var(--f35-no); width:var(--f35-no); height:var(--f35-no); border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--f-navy); font:22px/1 Georgia,serif; letter-spacing:.02em; box-shadow:0 0 0 4px var(--f-paper),0 0 0 5px var(--f-gold); position:relative; z-index:1; }
.sp-page-flow #sp-main.sp-main .f35-step__text { padding-top:2px; min-width:0; }
.sp-page-flow #sp-main.sp-main .f35-step__en { font:italic 12px/1.6 Georgia,serif; letter-spacing:.18em; color:var(--f-gold); margin:0 0 4px; }
.sp-page-flow #sp-main.sp-main .f35-step h3 { font-size:22px; line-height:1.6; letter-spacing:.03em; margin:0 0 8px; }
.sp-page-flow #sp-main.sp-main .f35-step__text > p:not(.f35-step__en) { font-size:14px; line-height:2; margin:0; max-width:680px; }
.sp-page-flow #sp-main.sp-main .f35-step__photo { grid-row:1; height:250px; overflow:hidden; }
.sp-page-flow #sp-main.sp-main .f35-step--l .f35-step__photo { grid-column:1; }
.sp-page-flow #sp-main.sp-main .f35-step--r .f35-step__photo { grid-column:3; }
.sp-page-flow #sp-main.sp-main .f35-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:14px 0 0; padding:0; }
.sp-page-flow #sp-main.sp-main .f35-tags li { margin:0; padding:4px 12px; border:1px solid var(--f-line); background:#fff; font-size:12px; line-height:1.8; }
.sp-page-flow #sp-main.sp-main .f35-tags li::before { content:'✓'; color:var(--f-gold); margin-right:6px; }

/* 安心のひとこと：独立カードにせず、タイムラインの後に罫線で区切った補助案内として置く。 */
.sp-page-flow #sp-main.sp-main .f35-care { display:flex; align-items:center; gap:18px; margin:48px 0 0 calc(var(--f35-side) + var(--f35-gap)); padding-top:26px; border-top:1px solid var(--f-line); }
.sp-page-flow #sp-main.sp-main .f35-care__icon { flex:0 0 44px; width:44px; height:44px; }
.sp-page-flow #sp-main.sp-main .f35-care__icon circle { fill:var(--f-tint); }
.sp-page-flow #sp-main.sp-main .f35-care__icon path { fill:none; stroke:var(--f-navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sp-page-flow #sp-main.sp-main .f35-care__title { font:600 18px/1.7 var(--f-serif); margin:0; }
.sp-page-flow #sp-main.sp-main .f35-care p:not(.f35-care__title) { font-size:13px; line-height:1.9; color:var(--f-muted); margin:4px 0 0; }

/* 日程のよくある質問（/piano-transport/ の FAQ と同じ形） */
.sp-page-flow #sp-main.sp-main .f35-faq { background:var(--f-tint); }
.sp-page-flow #sp-main.sp-main .f35-faq__layout { display:grid; grid-template-columns:1fr 2.4fr; gap:35px; align-items:start; }
.sp-page-flow #sp-main.sp-main .f35-faq h2 { font-size:26px; }
.sp-page-flow #sp-main.sp-main .f35-faq details { border:1px solid var(--f-line); margin-bottom:6px; background:#fff; }
.sp-page-flow #sp-main.sp-main .f35-faq summary { cursor:pointer; list-style:none; padding:13px 42px 13px 18px; position:relative; font-size:13px; font-weight:600; }
.sp-page-flow #sp-main.sp-main .f35-faq summary::-webkit-details-marker { display:none; }
.sp-page-flow #sp-main.sp-main .f35-faq summary::after { content:'＋'; position:absolute; right:15px; top:13px; }
.sp-page-flow #sp-main.sp-main .f35-faq details[open] summary::after { content:'−'; }
.sp-page-flow #sp-main.sp-main .f35-faq details p { margin:0; padding:0 18px 16px; font-size:13px; }
.sp-page-flow #sp-main.sp-main .f35-note { font-size:12px; line-height:1.8; margin:14px 0 0; color:var(--f-muted); }

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

/* CTA：/area/ と同じ濃紺の面・中央の大きなオレンジボタン・その下に電話 */
.sp-page-flow #sp-main.sp-main .f35-cta { padding:44px 0; background:radial-gradient(ellipse at 50% 0,#174863,#06273f); color:#fff; text-align:center; }
.sp-page-flow #sp-main.sp-main .f35-cta h2 { color:#fff; font-size:33px; margin:10px 0 16px; }
.sp-page-flow #sp-main.sp-main .f35-cta .sp-wrap > p:not(.f35-eye) { color:#dfe8ed; font-size:14px; line-height:1.9; margin:0 0 24px; }
.sp-page-flow #sp-main.sp-main .f35-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-flow #sp-main.sp-main .f35-main-cta:hover { background:#a94607; color:#fff; }
.sp-page-flow #sp-main.sp-main .f35-tel { display:flex; align-items:center; justify-content:center; gap:16px; color:#fff; text-decoration:none; }
.sp-page-flow #sp-main.sp-main .f35-tel span { font-size:12px; }
.sp-page-flow #sp-main.sp-main .f35-tel b { font-size:34px; letter-spacing:.03em; white-space:nowrap; }
.sp-page-flow #sp-main.sp-main .f35-phone p { font-size:11px; color:#d8e4eb; margin:6px 0 0; }

@media (max-width:1100px) {
 .sp-page-flow { --f35-side:280px; --f35-gap:28px; }
 .sp-page-flow #sp-main.sp-main .f35-hero__copy { padding:32px 26px; }
 .sp-page-flow #sp-main.sp-main .f35-step__photo { height:200px; }
 .sp-page-flow #sp-main.sp-main .f35-related__list > a { padding:18px 16px; }
 .sp-page-flow #sp-main.sp-main .f35-faq__layout { grid-template-columns:1.1fr 2fr; gap:28px; }
 .sp-page-flow #sp-main.sp-main .f35-faq h2 { font-size:22px; }
}
@media (max-width:899px) {
 .sp-page-flow #sp-main.sp-main .f35-step { display:block; padding-bottom:44px; }
 .sp-page-flow #sp-main.sp-main .f35-step::before { left:calc(var(--f35-no) / 2); }
 .sp-page-flow #sp-main.sp-main .f35-step::after { left:calc(var(--f35-no) / 2 - 4px); }
 .sp-page-flow #sp-main.sp-main .f35-step__photo { width:min(100% - var(--f35-no) - 24px,480px); height:240px; margin:18px 0 0 calc(var(--f35-no) + 24px); }
 .sp-page-flow #sp-main.sp-main .f35-care { margin-left:0; }
 .sp-page-flow #sp-main.sp-main .f35-faq__layout { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:800px) {
 .sp-page-flow #sp-main.sp-main .f35-hero__grid { grid-template-columns:1.2fr 1fr; }
 .sp-page-flow #sp-main.sp-main .f35-hero__copy { padding:28px 22px; }
 .sp-page-flow #sp-main.sp-main h2 { font-size:26px; }
}
@media (max-width:767px) {
 .sp-page-flow { --f35-no:44px; }
 .sp-page-flow #sp-main.sp-main .f35-pc { display:none; }
 .sp-page-flow #sp-main.sp-main .f35-no { font-size:18px; box-shadow:0 0 0 3px var(--f-paper),0 0 0 4px var(--f-gold); }
 .sp-page-flow #sp-main.sp-main .f35-step__main { gap:16px; }
 .sp-page-flow #sp-main.sp-main .f35-step h3 { font-size:20px; }
 .sp-page-flow #sp-main.sp-main .f35-step__photo { width:auto; height:190px; margin:16px 0 0 calc(var(--f35-no) + 16px); }
 .sp-page-flow #sp-main.sp-main .f35-related__list { grid-template-columns:1fr; }
}
@media (max-width:600px) {
 .sp-page-flow #sp-main.sp-main .f35-section { padding:32px 0; }
 .sp-page-flow #sp-main.sp-main .f35-hero__grid { grid-template-columns:1fr; min-height:0; }
 .sp-page-flow #sp-main.sp-main .f35-hero__copy { padding:28px 20px; }
 .sp-page-flow #sp-main.sp-main .f35-hero h1 { font-size:30px; }
 .sp-page-flow #sp-main.sp-main .f35-hero__photo { height:220px; }
 .sp-page-flow #sp-main.sp-main .f35-hero__photo::after { display:none; }
 .sp-page-flow #sp-main.sp-main h2 { font-size:23px; }
 .sp-page-flow #sp-main.sp-main .f35-faq h2 { font-size:23px; }
 .sp-page-flow #sp-main.sp-main .f35-care { align-items:flex-start; }
 .sp-page-flow #sp-main.sp-main .f35-related__list > a { padding:20px; position:relative; }
 .sp-page-flow #sp-main.sp-main .f35-related h3 { font-size:18px; margin-bottom:8px; }
 .sp-page-flow #sp-main.sp-main .f35-related p { margin-bottom:0; padding-right:15px; }
 .sp-page-flow #sp-main.sp-main .f35-related__list span { position:absolute; right:20px; top:22px; }
 .sp-page-flow #sp-main.sp-main .f35-cta { padding:34px 0; }
 .sp-page-flow #sp-main.sp-main .f35-cta h2 { font-size:24px; letter-spacing:0; }
 .sp-page-flow #sp-main.sp-main .f35-main-cta { min-height:68px; font-size:20px; gap:20px; }
 .sp-page-flow #sp-main.sp-main .f35-tel { flex-direction:column; gap:4px; }
 .sp-page-flow #sp-main.sp-main .f35-tel b { font-size:30px; }
}