/* hiro工房 自社サイト v2 ── 下層ページ専用スタイル（site.css の後に読み込む。site.css は変更しない） */

/* ===== パンくず ===== */
.bc{font-size:13px;color:var(--ink-mute);margin:26px 0 20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bc a{border-bottom:1px solid var(--line)}
.bc a:hover,.bc a:focus-visible{color:var(--ink)}
.bc span{color:var(--ink-mute)}

/* ===== ページの頭（パンくず＋判子＋H1＋導入文） ===== */
.page-head{padding-top:12px;padding-bottom:0}
.page-head .kicker{margin-bottom:22px}
.page-head h1{margin:0 0 22px}
.page-head .lead{margin-top:0;max-width:64ch}
.page-head .hero-cta{margin-top:30px}
.page-head .assure{margin-top:18px}
@media (max-width:720px){
  .bc{margin:16px 0 16px;font-size:12px}
  .page-head .hero-cta{margin-top:18px}
}

/* ===== チェックリスト（赤い実線／やわらかい破線） ===== */
.dash-list{display:flex;flex-direction:column;gap:12px;margin-top:40px;font-size:16px;color:var(--ink-mute);max-width:760px}
.dash-list li{padding-left:18px;border-left:2px solid var(--red)}
.dash-list.soft li{border-left-style:dashed;border-left-color:var(--ink-mute)}
.dash-note{margin-top:24px;color:var(--ink-mute);max-width:760px}
.terms li{padding-left:16px;border-left:2px solid var(--line)}
/* 「載せること」のうち、その業種でまず見られる項目だけ大きく・太いゴシックに（文言はそのまま） */
.dash-list li.key{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}

/* ===== 文字サイズ：本文・箇条書き・FAQ回答・料金内訳は16px以上に統一
   （下層ページ（pages.css を読み込むページ）のみ上書き。トップ・site.css は変更しない） ===== */
.lead{font-size:18px}
.price-col ul{font-size:16px}
.total-v small{font-size:16px}
.terms ul{font-size:16px}
.faq p{font-size:16px}
.reel-note{font-size:16px}
@media (max-width:720px){
  .lead{font-size:16px}
}

/* ===== モバイル専用の改行（孤立した1〜2文字の行・単語の分断を防ぐ） ===== */
br.brk{display:none}
@media (max-width:720px){
  br.brk{display:inline}
}
/* 見出しの改行：業種ページの見出し（左の狭い欄）は常に、そのほかの H2 は 1100px 以下で効かせる
   （太いゴシックに替えた際、中間の幅で「作。」「円。」だけが次の行に落ちるのを防ぐ） */
.ph-biz h1 br.brk{display:inline}
@media (max-width:1100px){
  h2 br.brk{display:inline}
}
.nowrap{white-space:nowrap}

/* ===== 節の間を詰める（業種ページ・作り直しの反復を抑える。既定の --gap-sec は変更しない） ===== */
.sec-tight{padding:96px 0}
@media (max-width:720px){
  .sec-tight{padding:72px 0}
}

/* ===== /ryokin/：「この価格でできる理由」と料金動画を横並びに（PCで右に空白を作らない） ===== */
.reason-vid{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;margin-top:40px}
.reason-vid .reason{margin-top:0;max-width:none}
.reason-vid .vid{margin-top:0;max-width:none}
@media (max-width:860px){
  .reason-vid{grid-template-columns:1fr;gap:32px}
  .reason-vid .vid{max-width:280px}
}

/* ===== 押せる見本（デモ・開ける）と、押せない見本画像（開けない）を見た目で区別する
   デモ＝これまでどおり .dm/.dm-frame（傾き・オフセット影・ホバーの判子＝「押せる」合図）
   画面だけ＝.flat-frame（傾き・影なし。細い罫線のみ＝「押せない・見るだけ」合図） ===== */
.biz-demo{max-width:460px}
.biz-demo .dm-frame{aspect-ratio:1024/640}

.flat-row{display:flex;flex-wrap:wrap;gap:28px;margin-top:40px}
.flat-item{flex:1 1 220px;max-width:340px}
.flat-frame{position:relative;display:block;overflow:hidden;border:1px solid var(--line);background:var(--paper);aspect-ratio:1024/640}
.flat-frame img{width:100%;height:100%;object-fit:cover;display:block}
.flat-cap{display:block;margin-top:14px}
.flat-cap b{font-family:var(--display);font-weight:700;font-size:16px;display:block;margin-bottom:4px}
.flat-cap span{color:var(--ink-mute);font-size:15px;display:block}

/* ===== 共通の5段階手順：段の余白を詰め、番号列を40pxにしてスマホの本文幅を確保 ===== */
.flow li{padding:18px 0;grid-template-columns:40px 1fr}

/* ===== 業種ページの最初の画面：説明の右に見本画像を引き上げ、PCの空きをなくす ===== */
.ph-biz{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;margin-top:8px}
.ph-biz .biz-demo{max-width:none}
.ph-biz h1{font-size:clamp(32px,4vw,56px)}
.ph-biz .biz-demo .dm-frame{aspect-ratio:1024/760}
@media (max-width:860px){
  .ph-biz{grid-template-columns:1fr;gap:28px;margin-top:28px}
}

/* ===== /mihon/：業種9画像へ #id で直接飛べるように（固定ヘッダー分の余白） ===== */
#hair,#flower,#auto,#pet,#dental,#eikaiwa,#izakaya,#bakery,#seitai{scroll-margin-top:90px}

/* ===== 暗い面（LINE帯・フッター）のキーボード選択枠：墨色だと埋もれるので紙白に ===== */
.contact :focus-visible,.ft :focus-visible{outline-color:var(--paper);outline-offset:2px}

/* ===== /mihon/：showcase 9業種（2列＋1列の段を交互・高さと幅を不揃いに。すべて .flat-frame＝開けない見本） ===== */
.mihon-rows{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 28px;margin-top:40px}
.mihon-rows .flat-item{max-width:none}
.mr-half{grid-column:span 6}
.mr-full{grid-column:span 12}
.mr-full .flat-frame{aspect-ratio:1024/440}
@media (max-width:980px){
  .mr-half{grid-column:span 12}
}
@media (max-width:600px){
  .mihon-rows{grid-template-columns:1fr;gap:40px}
  .mr-half,.mr-full{grid-column:auto}
  .mr-full .flat-frame{aspect-ratio:1024/640}
}

/* ===== /renew/：引き継げるもの／確認が必要なもの（罫線で比較できる2列） ===== */
.compare2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border:1px solid var(--line)}
.compare2>div{padding:28px 32px}
.compare2>div+div{border-left:1px solid var(--line)}
.compare2 h3{margin-bottom:16px}
.compare2 ul{display:flex;flex-direction:column;gap:14px;font-size:16px;color:var(--ink-mute)}
.compare2 li{padding-left:16px;border-left:2px solid var(--line)}
@media (max-width:860px){
  .compare2{grid-template-columns:1fr}
  .compare2>div+div{border-left:0;border-top:1px solid var(--line)}
}

/* ===== /faq/：15問を4群に分ける ===== */
.faq-group{margin-top:56px}
.faq-group:first-child{margin-top:40px}
.faq-h{font-size:22px;margin-bottom:4px}
.faq-group .faq{margin-top:16px}

/* ===== /tokushoho.html：表組み（装飾は最小） ===== */
.doc-head{padding-top:12px}
.tsh{border-top:1px solid var(--line);margin-top:40px;max-width:820px}
.tsh>div{border-bottom:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:200px 1fr;gap:20px}
.tsh dt{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink-mute);margin:0}
.tsh dd{margin:0;font-size:16px}
.tsh dd ul{display:flex;flex-direction:column;gap:8px}
.tsh dd li{padding-left:16px;border-left:2px solid var(--line);font-size:16px}
.tsh dd p + p{margin-top:8px}
.tsh-note{margin-top:28px;font-size:13px;color:var(--ink-mute)}
@media (max-width:720px){
  .tsh>div{grid-template-columns:1fr;gap:8px}
}