/* /piloti/soudan/ だけの見た目（共通の site.css に無いものだけ）
   - ヒーローの文を2段落に分けたときの間
   - 「今の自分に合う入口」（料金の早見の並びを、ページ内の行き先に使う）
   - 01 の本文カードと、親ページ /piloti/ への写真つき案内
   - 帯の下の注記（小さめの文字。色は本文と同じ濃さ） */

.hero-copy .lead + .lead { margin-top: .9em; }
/* 広い画面では見出しを2行に収める（強調の語を行の途中で割らない） */
@media (min-width: 1181px) { .hero-copy h1.long { font-size: 2.55rem; } }

.pl-guide .inner { padding: 22px 22px 18px; }
.pl-guide .guide-head p { margin-top: 4px; font-size: .88rem; color: var(--ink-2); }
.pl-guide .glance-list { margin-top: 16px; }
.pl-guide .glance-list .pr { color: var(--acc-ink); font-size: 1rem; }

.pl-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.pl-body { padding: 28px 30px 26px; }
.pl-body p { margin: 0 0 12px; color: var(--ink-2); }
.pl-body .pl-aside { font-size: .88rem; color: var(--ink-3); }
.pl-act { margin-top: 20px; }

.pl-photo { display: flex; flex-direction: column; overflow: hidden; color: var(--ink); text-decoration: none !important; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.pl-photo:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--acc) 30%, var(--line)); }
.pl-photo picture { flex: 1; min-height: 0; }
.pl-photo img { width: 100%; height: 100%; object-fit: cover; }
.pl-photo .cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; font-weight: 700; }
.pl-photo .to { color: var(--acc-ink); font-size: 1.1rem; }

.pl-notice { max-width: 46em; margin: 22px 4px 0; font-size: .88rem; line-height: 1.85; color: var(--ink-2); }

@media (max-width: 820px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-photo { flex-direction: row; align-items: center; }
  .pl-photo picture { flex: 0 0 132px; }
  .pl-photo img { height: 88px; }
  .pl-photo .cap { flex: 1; padding: 12px 18px; }
}
@media (max-width: 560px) {
  .pl-guide .inner { padding: 18px 16px 16px; }
  .pl-body { padding: 22px 20px 20px; }
  .pl-act { align-items: stretch; }
  .pl-act .btn { width: 100%; }
  .pl-photo picture { flex-basis: 112px; }
  .pl-photo img { height: 76px; }
  .pl-photo .cap { padding: 10px 16px; }
  .pl-notice { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-photo:hover { transform: none; }
}