/* 2026-10-16 大隆さん指示「セラー募集のLPは文字ばかりで実画像がないから全然だめ。人は視認性で判断する。
   ホシルの訴求ポイントや推し機能を、実際の画像を掲載して。表示できない部分はぼかせばよい」。
   HOSHILU 本番の画面写真（/for-sellers-shots/、scripts/build-seller-lp-shots.mjs が毎週月曜に撮る）をスマホの枠に入れて見せる。 */
/* instagram-look.css が影（box-shadow）を全部消すので、スマホの縁は border で描く */
.real-phone{position:relative;overflow:hidden;border:8px solid #14142a;border-radius:34px;background:#fff}
.real-phone img{display:block;width:100%;height:auto}
.real-pr-pin{display:block;margin:0 0 12px;padding:9px 12px;border-radius:14px;background:linear-gradient(110deg,#ff4f9a,#7357ff);color:#fff;font-size:12px;font-weight:800;line-height:1.5;text-align:center}
.real-pr-pin b{display:inline-block;margin:0 2px;padding:0 6px;border-radius:6px;background:#fff;color:#c2185b;font-weight:900}

/* 第一画面（ヒーロー）の実画面＝掲載見本（10/16「リアルな掲載見本を画面掲載して」）。ラベルは画面に重ねず上に置く */
.seller-hero-real{position:relative;z-index:1;justify-self:center;width:min(340px,100%);margin:0}
.seller-hero-real .real-phone{max-height:600px}
.seller-hero-real figcaption{margin-top:16px;color:#5a5576;font-size:12px;line-height:1.6;text-align:center}

/* 「HOSHILUの実際の画面」 */
.real-screens{margin:0 0 72px}
.real-screens h2 span{color:#5134c5}
.real-screens .section-lead{max-width:760px}
.real-screens-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:28px}
.real-screen{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0}
.real-screen .real-phone{aspect-ratio:9/16}
/* 画面の上から見せる（左右は切らない。長い画面は下だけ枠で隠れる） */
.real-screen .real-phone img{width:100%;height:auto}
.real-screen figcaption{display:grid;gap:6px;color:#3d3b55;font-size:13px;line-height:1.75}
.real-screen figcaption strong{color:#221759;font-size:15px;line-height:1.5}
.real-screen figcaption b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ff4f9a,#7357ff);color:#fff;font-size:13px}
.real-screens-note{margin-top:18px;color:#5a5576;font-size:12px}
.real-swipe-hint{display:none}

@media(max-width:900px){
  /* スマホは見出しのすぐ下に実画面を出す（文字より先に画面が目に入るように） */
  .seller-showcase-hero .seller-hero-copy{display:contents}
  .seller-showcase-hero .eyebrow{order:1;justify-self:start}
  .seller-showcase-hero h1{order:2}
  .seller-showcase-hero .seller-hero-real{order:3;width:min(300px,80%);margin:18px auto 10px}
  .seller-showcase-hero .lead{order:4}
  .seller-showcase-hero .hero-price{order:5}
  .seller-showcase-hero .hero-actions{order:6}
  .seller-hero-real .real-phone{max-height:430px}
  .real-screens-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 10px 18px;margin:20px -10px 0;-webkit-overflow-scrolling:touch}
  .real-screen{scroll-snap-align:start}
  .real-swipe-hint{display:block;margin-top:6px;color:#7357ff;font-size:12px;font-weight:700}
}

/* 2026-10-16 大隆さん指示「長文はくどい。端的に・箇条書きに。変な改行も改善」「後半、リアル画像が全くない」 */
/* 見出しは途中で 1〜2 文字だけ次の行に落ちないよう、行の長さをそろえる（対応ブラウザだけ効く） */
main h2,main h3{text-wrap:balance}
main p,main li,main figcaption{text-wrap:pretty}
main h2 span{display:inline-block}

/* 「探していた人を、呼び戻す」: 実際の「ホシっとく」の画面と 4 段 */
.flow-real{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:32px;align-items:center}
.flow-real .flow-shot{margin:0}
.flow-real .flow-shot .real-phone{aspect-ratio:auto;max-height:460px;border-color:#3d3a66}
.flow-real .flow-shot figcaption strong{color:#c9c4e6;font-size:12px;text-align:center}
.dm-flow .flow-real ol{grid-template-columns:1fr 1fr}
/* 画面がまだ撮れていない（枠ごと外れた）ときは、4 段を横いっぱいに並べる */
@media(min-width:901px){.flow-real:not(:has(.flow-shot)){grid-template-columns:1fr}.dm-flow .flow-real:not(:has(.flow-shot)) ol{grid-template-columns:repeat(4,1fr)}}

/* 料金カードの無料期間の説明（長い文）が丸い錠剤の形からはみ出していた。角丸の箱にする */
.price-card .campaign{display:block;border-radius:14px;line-height:1.65;font-weight:700}

/* 相談フォームの横の掲載見本 */
.seller-sample-real{width:min(260px,72%);margin:16px auto 4px}
.seller-sample-real .real-phone{max-height:360px;border-width:6px;border-radius:26px}
.seller-sample-real figcaption{margin-top:8px;color:#5a5576;font-size:12px;text-align:center}

@media(max-width:900px){
  .flow-real{grid-template-columns:1fr;gap:22px}
  .flow-real .flow-shot{width:min(260px,72%);margin:0 auto}
  .flow-real .flow-shot .real-phone{max-height:380px}
  .dm-flow .flow-real ol{grid-template-columns:1fr}
  /* 「1,980円でできること」はスマホで横長の小さなカード（アイコン左・文字右）。6 枚が縦に長くならないように */
  #included .expose-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  #included .expose-grid article{min-height:0;padding:14px 16px 14px 64px}
  #included .expose-grid article::before{top:16px;left:16px}
  #included .expose-grid article::after{top:23px;left:25px}
  #included .expose-grid h3{margin:2px 0 4px;font-size:16px;line-height:1.4}
  #included .expose-grid p{font-size:12.5px;line-height:1.6}
  #pricing .pricing-head h2{font-size:clamp(22px,6.4vw,30px);line-height:1.3}
  /* 「自店の掲載見本を相談する」が「…相／談する」と割れないよう、1 行に収まる大きさに */
  .form-intro h2{font-size:clamp(22px,6.4vw,30px);line-height:1.3}
}
/* PC: 第一画面の見出しが「…人の目／の前へ。」と途中で割れていた。左の列に 2 行で収まる大きさに */
@media(min-width:901px){
  .seller-showcase-hero h1{font-size:clamp(32px,3.6vw,52px);line-height:1.2}
  .seller-showcase-hero h1 span{display:inline-block}
}

/* 2026-10-16: 固定ヘッダーの下に隠れないように。プランの案内は入力欄の上に小さく出す */
#businessForm,#sellerBusinessForm label{scroll-margin-top:calc(var(--topbar-height,74px) + 16px)}
.form-plan-note{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:#f3f0ff;color:#4b3bb8;font-weight:700;font-size:.92rem}