/* mobile-fix.css
   クロードデザインの出力はデスクトップ固定のインラインstyleで組まれている。
   インラインstyleは通常の上書きが効かないため、ここでは !important で
   860px以下のときだけレイアウト指定を畳む。値の変更はせず、畳むだけ。 */
@media (max-width:860px){

  /* 多カラムのグリッドはすべて縦積みへ */
  [style*="grid-template-columns"]{display:block !important}
  [style*="grid-template-columns"] > * + *{margin-top:24px !important}
  /* 罫リストの見出し／説明の行間はもう少し詰める */
  [style*="1fr 1.4fr"] > * + *{margin-top:8px !important}

  /* flex行は折り返す。ナビ・ボタンの文字は縦割れさせない */
  header [style*="display:flex"],
  main   [style*="display:flex"],
  footer [style*="display:flex"]{flex-wrap:wrap !important}
  header [style*="display:flex"]{gap:10px 20px !important;padding-top:14px !important;padding-bottom:14px !important}
  header nav{gap:8px 18px !important}
  header a, header span, .btn, a[href^="tel:"]{white-space:nowrap}

  /* デスクトップ用の大きな余白を圧縮 */
  [style*="padding:110px"],
  [style*="padding:100px"],
  [style*="padding:90px"]{padding:48px 20px 56px !important}
  [style*="padding:26px 56px"]{padding:20px !important}
  [style*="padding:22px clamp"]{padding:12px 20px !important}
  [style*="padding:16px clamp"]{padding:12px 20px !important}

  /* ヒーロー写真の高さを画面幅基準に */
  [style*="height:clamp(380px"]{height:min(76vw,420px) !important}

  /* 構成比較シートの1280px固定アートボードは、縮尺サムネイルとして縦に並べる */
  [style*="width:1280px"]{zoom:.26}
  [style]:has(> [style*="width:1280px"]){padding-left:16px !important;padding-right:16px !important}
}

/* 構成比較シートの1280px固定アートボードは、画面幅に応じて縮尺を落とす。
   860px以下は上のブロックで .27 にしている。その上の帯（861〜1279px）が
   抜けていて横にはみ出していたので、段階的に埋める。 */
@media (min-width:861px) and (max-width:1359px){
  [style*="width:1280px"]{zoom:.75}
}
@media (min-width:861px) and (max-width:1023px){
  [style*="width:1280px"]{zoom:.62}
}

/* 工種の重なり図：base.css は760px以下で「素直に積む」指定を持っているが、
   帯の位置と幅がインラインstyleで書かれているため効いていなかった。
   狭い画面では階段状の配置が読めないので、作者の意図どおり積む。 */
@media (max-width:760px){
  .lane .tradebar[style]{margin-left:0 !important;width:100% !important}
  .tradebar .overlap{display:none !important}
}
/* 段差が消えると上の時間軸は意味を持たないので隠し、注記も入れ替える。 */
.narrow-only{display:none}
@media (max-width:760px){
  .rc-wide > .axis{display:none !important}
  .wide-only{display:none}
  .narrow-only{display:inline}
}