/* 日本語組版の調整（吉行重機） — patch-typography.mjs が生成 */

/* ① 禁則処理。
      母体CSSは line-break を指定していないため既定の auto になり、
      小書きかな（ッ ョ ゃ）や長音符（ー）の前で改行されてしまう。 */
body, p, li, td, th, dt, dd, figcaption, label,
h1, h2, h3, h4, h5, h6, span, a, button, strong, em, blockquote {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ② 泣き別れ（最終行に1〜2文字だけ残る）の回避。
      効くのは Chromium と WebKit のみ。Firefox 用の保険は
      マークアップ側の .yj-nw（末尾数文字の nowrap）で入れている。 */
p, li, dd, td, blockquote { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* ③④ 途中で切ってはいけないまとまり
      （電話番号・郵便番号・営業時間、および用語のかたまり） */
.yj-nw { white-space: nowrap; }

/* ⑤ スマホでの見出しの大きさ。
      母体のバナー見出しは 375px でも 52px のままで、コラムの長いタイトルが
      1行6文字 × 8行（高さ 460px）になってしまう。
      幅に対して頭打ちさせて4行に収める。rem はテーマ側が可変にしているので px で書く。 */
@media (max-width: 767px) {
  .banner h1 { font-size: clamp(27px, 8.2vw, 38px); line-height: 1.35; }
}
/*    タブレット横（1024〜1279px）はバナーのテキスト枠が画面の半分になり、
      左padding 144px を引くと見出しの幅が 383px しか残らない。
      52px のままだと1行7文字になるので、ここでも頭打ちにする。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .banner h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.4; }
}

/*    見出しを3カラム幅（md:col-span-3）で置いている節は、1024〜1279px で
      枠が 170〜235px しかない。「アタッチメント」は1語で 190px 必要なため、
      語を割らない扱いにすると枠からはみ出す。ここだけ字を小さくして収める。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  h2[class~="md:col-span-3"] { font-size: clamp(20px, 2.2vw, 26px); }
}

/* ⑥ 電話番号のCTA。
      375px では1行に 372px 必要なのに使える幅が 345px しかなく、
      「072-894-114／1」と割れる（Firefox）。幅に収まるところまで縮める。 */
@media (max-width: 767px) {
  a[href^="tel:"].text-h1 { font-size: clamp(28px, 12.2vw, 54px); }
}

/* ⑦ 割ってはいけないまとまりの手書き指定。
      .yj-nw は patch-typography が毎回付け直すため、生成側（reskin.mjs 等）で
      書いた分は消えてしまう。手で守りたい箇所はこちらを使う。 */
.yj-keep { white-space: nowrap; }

/* ------------------------------------------------ 本文の組み方
   母体は行送り 1.24／段落の間 0.8em で組まれている。ラテン文字なら詰め気味でも
   単語の切れ目が空白で見えるので成立するが、日本語は字面が大きく空白も無いため、
   1.24 では行と行がくっついて、ひとかたまりの黒い面にしか見えない。
   日本語の本文は 1.8〜2.0 が読みやすいとされる。段落の間も1行ぶん空ける。 */
main .content p,
main .content li,
main .content dd,
main .content blockquote { line-height: 1.9; }

main .content .block-content > p,
main .content .content-part p,
main .content .wp-block-column > p,
main .content .benefits p { margin-bottom: 1.5em; }
main .content .block-content > p:last-child,
main .content .content-part p:last-child,
main .content .wp-block-column > p:last-child,
main .content .benefits p:last-child { margin-bottom: 0; }

/* 見出しも 1.1 のままだと、2行になったとき上下の行がぶつかる */
main .content h2 { line-height: 1.4; }
main .content h3,
main .content h4 { line-height: 1.55; }

/* 小見出し。母体の text-h4 は 1.25rem ＝ 本文とまったく同じ大きさで、
   太さの差（500対400）しかなく、見出しとして目に留まらない。 */
.module.basic .content-part > h3,
.wp-block-columns h3.wp-block-heading {
  font-size: 1.5rem;
  font-weight: 700;
}
/* 画像のすぐ下に小見出しが来ると写真の説明のように見えるので、SPでは間を空ける */
.module.basic .content-part > h3 { margin: 1.9rem 0 0.9rem; }
@media (min-width: 768px) {
  .module.basic .content-part > h3 { margin-top: 0; }
}

/* 見出しの下に短い罫を引く。
   本文と同じ黒い面が続くだけだと、どこで話題が変わったのか分からない。
   ブランドの黄色で「ここから次の話」と分かるようにする。 */
main .content h2 {
  display: flow-root;   /* ::after を確実に段落として置く */
}
main .content h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: 0.9rem;
  background: #ffd300;
}
/* 黄色の面では黄色い罫が見えないので黒にする */
.is-style-yellow h2::after,
.wp-block-columns.is-style-yellow h2::after { background: #1a1a1a; }
/* コラム本文の見出しはクライアントが自由に書くので、罫は付けない
   （h2 が10個並ぶ記事だと罫だらけになる） */
.yj-article h2::after { display: none; }
/* バナー（ページ最上部の写真）の見出しにも要らない */
.banner h2::after { display: none; }

/* ------------------------------------------------ 母体CSSに無いユーティリティ
   母体の Tailwind は「母体が使っているクラスだけ」を含めてビルドされている。
   着せ替えで新しく使ったクラスがバンドルに無いと、エラーにならず黙って無効化され、
   併記した col-span-full にフォールバックして段組みが崩れる。
   プライバシー本文の字下げに使う md:col-start-4 が該当したので、ここで補う。
   （不足の検出は audit-classes.mjs） */
@media (min-width: 768px) {
  .md\:col-start-4 { grid-column-start: 4; }
}

/* ------------------------------------------------ セクションの継ぎ目
   母体の .wp-block-columns は margin-bottom を持っていて、
   親セクションには背景が無いため、色付きブロックの下に 27px の白帯が出る。
   濃いグレーの次に黄色のセクションが来ると、その隙間がはっきり見えてしまう。 */
.type-columns .wp-block-columns { margin-bottom: 0; }


/* ------------------------------------------------ 箇条書き
   母体の list-disc は行間が詰まり、行頭記号と本文の位置も揃わない。
   記号を四角にして、折り返した2行目が本文の頭に揃うようにする。 */
ul.list-disc {
  list-style: none;
  padding-left: 0;
  /* 下の余白を空けないと、続く段落が最後の項目にくっついて読めない */
  margin: 1rem 0 1.4rem;
}
ul.list-disc:last-child { margin-bottom: 0; }
ul.list-disc > li {
  position: relative;
  padding-left: 1.15em;
  margin-top: 0.5em;
  line-height: 1.85;
}
ul.list-disc > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.42em;
  height: 0.42em;
  background: currentColor;
  opacity: .55;
}
/* 黄色・グレーの面では記号を目立たせる */
.is-style-yellow ul.list-disc > li::before,
.is-style-gray ul.list-disc > li::before { opacity: .8; }

/* ------------------------------------------------ 列挙（機種・カテゴリ）
   「油圧ショベル／ミニ油圧ショベル」のように区切り記号で並べると、
   狭い幅で「トラックダンプ／／ブルドーザー」のように途中で割れて読みにくい。
   1語ずつの札にして、札の単位で折り返す。 */
/* 母体に「.basic ul { flex-direction: column }」があるため、
   同じ強さでは縦一列のままになる。セレクタを重ねて上書きする。 */
ul.yj-tags,
.basic ul.yj-tags,
.module ul.yj-tags {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.4rem;
}
ul.yj-tags:last-child { margin-bottom: 0; }
ul.yj-tags > li,
.basic ul.yj-tags > li,
.module ul.yj-tags > li {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: .3rem .8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .92em;
  line-height: 1.6;
  white-space: nowrap;
  opacity: .92;
}
/* 件数つきの札（大割機 64件）は数字を強調する */
ul.yj-tags > li .n {
  font-weight: 700;
  margin-left: .35em;
}

/* ------------------------------------------------ ヘッダー（TOPの最上部）
   TOPだけはヘッダーがMVの写真に重なる（下層ページは写真がヘッダーの下から始まる）。
   母体は文字色を黒のままにしていて、写真の暗い部分に重なると読めない（実測 1.08:1）。
   スクロール後は黒帯＋黄文字になるので、最上部もそれに寄せて白文字にし、
   写真側の上端にも薄い暗がりを足す。

   ただし白にしてよいのは 1200px 以上だけ。母体の .header-bg は
   bg-primary-yellow lg:invisible で、1200px 未満では黄色の帯になるため、
   白文字にすると黄色地に白（1.2:1）で読めなくなる。狭い画面は黒のままにする。
   ※このテーマの lg は Tailwind 既定の 1024px ではなく 1200px（main.min.css で確認）。
     1024 で切ると 1024〜1199px が黄色地に白のまま残る。 */
@media (min-width: 1200px) {
  body.home:not(.scrolled) .main_header,
  body.home:not(.scrolled) .main_header a,
  body.home:not(.scrolled) .ticker-wrapper { color: #fff; }
}

body.home .banner .dark-overlay,
body.home .main-content .content > section > .dark-overlay {
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.72) 0,
      rgba(0, 0, 0, 0.66) 5.5rem,
      rgba(0, 0, 0, 0.30) 9rem,
      rgba(0, 0, 0, 0) 14rem),
    linear-gradient(to top,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(0, 0, 0, 0.66) 40%,
      rgba(0, 0, 0, 0.48) 65%,
      rgba(0, 0, 0, 0.20) 85%,
      rgba(0, 0, 0, 0) 100%);
}

/* ヒーローの白文字が読めるようにする。
   母体の .dark-overlay は背景色が透明のままで、写真が暗いことに頼っていた。
   明るい写真をMVにすると白文字のコントラストが 1.34:1 まで落ちて読めない。
   見出しがある下側だけを暗くする（写真の上半分はそのまま見せる）。 */
.banner .dark-overlay,
.main-content .content > section > .dark-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.74) 0%,
    rgba(0, 0, 0, 0.66) 40%,
    rgba(0, 0, 0, 0.48) 65%,
    rgba(0, 0, 0, 0.20) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ------------------------------------------------ メインビジュアル（MV）

   母体は「写真の下のほうに見出しを置くだけ」で、
   ・SPでは画面の半分（50vh）しか使っていない
   ・見出しの前後に何も無く、写真とただ重なっているだけに見える
   ・下に続きがあることを示すものが無い
   という状態だった。高さ・余白・目印・スクロールの合図を足す。 */

/* SP：画面いっぱいに。
   100vh はiOSでアドレスバーのぶんだけ画面より高くなり、
   下端のボタンが隠れる。svh（バーが出ている状態の高さ）を使えば必ず収まる。
   svh を知らないブラウザには先に書いた 100vh が残る。 */
@media (max-width: 767px) {
  body.home main .content > section.banner {
    min-height: 100vh;
    min-height: 100svh;
  }
  /* 下層ページはヘッダー（3rem）のぶん下から始まるので、その高さを引く */
  body:not(.home) main .content > section.banner {
    min-height: calc(100vh - 3rem);
    min-height: calc(100svh - 3rem);
  }
  /* 文字の塊を下端から離す（スクロールの合図と重ならないように）。
     左右も母体の 1rem では画面の縁に貼り付いて見えるので少し広げる */
  .banner .textbox {
    padding-bottom: 5.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .banner .textbox .text { padding-top: 0; }
}

/* 見出しの上に黄色い罫。本文の節と同じ目印にして、
   写真の上に文字が乗っているだけの状態から「見出し」に見えるようにする */
.banner .textbox h1::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  background: #ffd300;
  margin-bottom: 1.1rem;
}

/* PC：文字の枠が画面の半分（grid 1/7）しかなく、
   「新品に負けないレベルへ」が11文字で3行に割れていた。
   枠を2/3まで広げて、主要な見出しが1〜2行に収まるようにする。
   左寄せなので、広げても写真の右側はそのまま見える。 */
@media (min-width: 1024px) {
  /* 母体は .banner .textbox.justify-self-start に grid-column-end: 7 を当てている。
     クラスを1つ足さないと詳細度で負けるので、同じ形で上書きする */
  .banner .textbox.justify-self-start { grid-column-end: 9; }
  .banner .textbox .text > h1 { max-width: 16em; }
  /* リード文は本文と同じ大きさで、見出しの付属物に見えなかった */
  .banner .textbox .text > p.text-h4 {
    font-size: 1.55rem;
    max-width: 38em;
    opacity: .95;
  }
  /* 見出しの下端を画面の底から離す */
  .banner .textbox { padding-bottom: 5rem; }
}

/* 下に続きがあることを示す目印。
   細い軌道の上を黄色い光が下りていく形にする。1本の線を薄く光らせるだけだと
   写真に紛れて気づかれない。
   .dark-overlay が z-index:10、.textbox が 20 なので、その上に置く。 */
main .content > section.banner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  width: 2px;
  height: 3.4rem;
  z-index: 30;
  background-color: rgba(255, 255, 255, 0.3);
  background-image: linear-gradient(#ffd300, #ffd300);
  background-repeat: no-repeat;
  background-size: 2px 45%;
  background-position: 0 -45%;
  animation: yj-scroll-cue 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes yj-scroll-cue {
  0%       { background-position: 0 -45%; }
  60%, 100% { background-position: 0 145%; }
}
@media (prefers-reduced-motion: reduce) {
  main .content > section.banner::after {
    animation: none;
    background-position: 0 50%;
  }
}

/* 3カラムの見出しは別セクションに置いている（背景を揃えて一体に見せるため）。
   見出しの margin-bottom 43px ＋ 本体の padding-top 96px ＋ 各カラム h3 の
   margin-top 43px が積み上がって 122px 空いていたので、後ろ2つを詰める。 */
.type-columns.layout-3 .wp-block-columns { padding-top: 0.75rem; }
.type-columns.layout-3 .wp-block-columns > .wp-block-column > :first-child { margin-top: 0; }
@media (min-width: 768px) {
  .type-columns.layout-3 .wp-block-columns { padding-top: 1.25rem; }
}

/* ------------------------------------------------ コラムのカード一覧
   母体テーマの Tailwind ビルドに md:grid-cols-3 が無いため、段組みは自前で持つ。 */
.yj-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.75rem;
}
@media (min-width: 640px) { .yj-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .yj-cards { grid-template-columns: repeat(3, 1fr); } }

.yj-card { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: inherit; }
.yj-card__thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ececec;
}
.yj-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.yj-card:hover .yj-card__thumb img { transform: scale(1.04); }
.yj-card__meta { display: block; opacity: .7; }
.yj-card__title { display: block; font-weight: 500; line-height: 1.6; }
.yj-card:hover .yj-card__title { text-decoration: underline; text-underline-offset: 4px; }

/* TOPの新着コラムに付けるサムネイル（母体の releases リストに差し込む） */
.module.releases .yj-thumb {
  flex: 0 0 auto;
  width: 7.5rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ececec;
  display: block;
}
.module.releases .yj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .module.releases .yj-thumb { width: 5.5rem; }
  .module.releases li { gap: 1rem; }
  /* 日付ブロックの固定幅がSPでは効きすぎるので詰める */
  .module.releases li .date.flex { min-width: 4rem; }
}

/* ------------------------------------------------ コラム本文
   クライアントはブロックエディタで書くので、出てくるのは素の h2 / p / ul。
   母体CSSは見出しの上下余白を持たず、リストの記号も付かないため、ここで整える。 */
.yj-article > h2 { margin: 3rem 0 1rem; }
.yj-article > h3 { margin: 2.2rem 0 .8rem; }
.yj-article > h2:first-child,
.yj-article > h3:first-child { margin-top: 0; }
.yj-article > p { margin: 0 0 1.4rem; }
.yj-article ul,
.yj-article ol { margin: 1rem 0 1.4rem; padding-left: 0; list-style: none; }
.yj-article ul > li,
.yj-article ol > li { position: relative; padding-left: 1.15em; margin-top: .5em; line-height: 1.85; }
.yj-article ul > li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: .42em; height: .42em; background: currentColor; opacity: .55;
}
.yj-article ol { counter-reset: yj; }
.yj-article ol > li { counter-increment: yj; }
.yj-article ol > li::before { content: counter(yj) "."; position: absolute; left: 0; opacity: .65; }
.yj-article img { max-width: 100%; height: auto; }
.yj-article figure { margin: 1.6rem 0; }
.yj-article blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid currentColor; opacity: .85;
}
.yj-article a { text-decoration: underline; text-underline-offset: 3px; }

/* 記事が無いときの空表示 */
.yj-empty {
  border: 1px dashed currentColor;
  padding: 2rem 1.5rem;
  text-align: center;
  opacity: .75;
}

/* アイコン付きナビの短いラベル（会社概要／代表あいさつ／リクルート）は
   語の途中で折り返すより1行に収まるほうが読みやすい。
   375px では親が 85px しかなく「代表あいさ／つ」と割れるので、狭い画面だけ縮める。 */
.label.block { white-space: nowrap; }
@media (max-width: 767px) {
  .label.block { font-size: clamp(0.7rem, 3.3vw, 0.95rem); }
}

/* ------------------------------------------------ 3カラムの中のリンク
   もとは「ラベル ›」と文字で矢印を置いていた。文字なので折り返しの対象になり、
   ラベルが枠いっぱいのときに矢印だけが次の行へ落ちる。
   矢印はCSSで描いた図形にして、ラベルとは別の欄に固定する。 */
/* 母体は .wp-block-column の段落に margin-bottom 43px を当てている。
   行の区切りは線で示すので、段落どうしの余白は落とす（詳細度を合わせて上書き） */
.wp-block-column p.yj-collink-row { margin: 0; }

/* リンクではない項目（LPの「こんなお困りごとはありませんか」など）。
   ただの段落を43pxずつ空けて並べていたので、
   1つ1つが独立した文なのか、続きの文章なのかが読み取れなかった。
   小さな印を付けて、箇条書きだと分かるようにする。 */
.wp-block-column p.yj-colitem {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0 0 1rem;
}
.wp-block-column p.yj-colitem:last-child { margin-bottom: 0; }
.yj-colitem__mark {
  flex: 0 0 auto;
  width: .45rem;
  height: .45rem;
  margin-top: .78em;
  background: currentColor;
  opacity: .55;
}
.is-style-gray .yj-colitem__mark,
.wp-block-columns.is-style-gray .yj-colitem__mark { background: #ffd300; opacity: .9; }
.yj-colitem__label { flex: 1 1 auto; line-height: 1.8; }
.yj-collink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  text-decoration: none;
  color: inherit;
  transition: opacity .2s ease;
}
/* 区切り線。border に不透明度を掛けられないので、線は擬似要素で引く */
.yj-collink::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .22;
}
.wp-block-column > .yj-collink-row:first-of-type .yj-collink { padding-top: 0; }
.yj-collink:hover { opacity: .7; }
.yj-collink:hover .yj-collink__label { text-decoration: underline; text-underline-offset: 4px; }
.yj-collink__label { flex: 1 1 auto; line-height: 1.7; }
.yj-collink__arrow {
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .8;
  transition: transform .2s ease;
}
.yj-collink:hover .yj-collink__arrow { transform: rotate(45deg) translate(2px, -2px); }

/* ------------------------------------------------ よくある質問（開閉式）
   質問を押すと答えが出る。<details> の素の機能なので JavaScript は要らない。 */
.yj-faq { position: relative; }
.yj-faq::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: currentColor; opacity: .18;
}
.yj-faq__group {
  margin: 2.5rem 0 .5rem;
  opacity: .7;
}
.yj-qa { position: relative; }
.yj-qa::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; opacity: .18;
}
.yj-qa__q {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  position: relative;
  padding: 1.1rem 2.6rem 1.1rem 0;
  margin: 0;
  line-height: 1.65;
  cursor: pointer;
  list-style: none;
  transition: opacity .2s ease;
}
/* 既定の三角マーカーを消す（Safari は ::-webkit-details-marker） */
.yj-qa__q::-webkit-details-marker { display: none; }
.yj-qa__q::marker { content: ""; }
.yj-qa__q:hover { opacity: .68; }
.yj-qa__q:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* 開閉の向きを示す山形。開くと上向きに回る */
.yj-qa__q::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 1.5rem;
  width: .6rem; height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
  transition: transform .25s ease;
}
.yj-qa[open] .yj-qa__q::after { transform: rotate(-135deg); top: 1.75rem; }
.yj-qa__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em; height: 1.7em;
  margin-top: .1em;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  background: #ffd300;
  color: #1a1a1a;
}
.yj-qa__mark--a {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: .6;
  font-weight: 500;
}
.yj-qa__label { flex: 1 1 auto; }
.yj-qa__a {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 0 2.6rem 1.4rem 0;
  animation: yj-qa-in .26s ease;
}
.yj-qa__body { margin: 0; line-height: 1.9; }
@keyframes yj-qa-in {
  from { opacity: 0; transform: translateY(-.25rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yj-qa__a { animation: none; }
  .yj-qa__q::after { transition: none; }
}
@media (max-width: 767px) {
  .yj-qa__q { padding-right: 2rem; gap: .55rem; }
  .yj-qa__q::after { right: .1rem; }
  .yj-qa__a { padding-right: 0; gap: .55rem; }
}
/* カテゴリ見出しへ飛んだとき、固定ヘッダーの下に隠れないようにする */
.yj-faq-sec { scroll-margin-top: 6rem; }
/* 母体の出現アニメ（.showOnScroll）は、まだ表示されていない要素を
   translateY(100px) の位置に置いている。索引から飛ぶと、ブラウザは
   「ずれたままの位置」を基準にスクロールし、その直後にアニメが
   100px 引き上げるので、見出しがヘッダーの裏に入ってしまう。
   この節だけ縦移動を止め、透明度だけのフェードにする（!important は
   GSAP がインラインで書く transform に勝たせるため）。 */
.yj-faq-sec { transform: none !important; }

/* ------------------------------------------------ フッターのナビ
   母体は行間 19px・項目間 0 で並べている。日本語の項目名は2行になるものが多く、
   そのままだと「中古重機・建設機／械販売／重機アタッチメン／ト販売」が
   ひと続きの文章に見えて、どこまでが1項目か分からない。 */
#footer-menu .sub-menu { margin-top: .55rem; }
#footer-menu .sub-menu > li { line-height: 1.6; }
#footer-menu .sub-menu > li + li { margin-top: .5rem; }
#footer-menu a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 子を持つ項目（会社案内・サービス・当社の特徴）の開閉。
   PCは開きっぱなしで従来どおりの3段組み、SPだけ畳んで見出しから辿れるようにする。
   開閉そのものは <details> の素の機能で、幅による開け閉めだけ yj/ui.js が行う。 */
.yj-fnav > .yj-fnav__head {
  list-style: none;
  display: block;
  cursor: default;
}
.yj-fnav > .yj-fnav__head::-webkit-details-marker { display: none; }
.yj-fnav > .yj-fnav__head::marker { content: ""; }

@media (max-width: 1023px) {
  #footer-menu .yj-fnav > .yj-fnav__head {
    position: relative;
    cursor: pointer;
    padding: .7rem 2rem .7rem 0;
    transition: opacity .2s ease;
  }
  #footer-menu .yj-fnav > .yj-fnav__head:hover { opacity: .72; }
  #footer-menu .yj-fnav > .yj-fnav__head:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  /* 開閉の向きを示す山形 */
  #footer-menu .yj-fnav > .yj-fnav__head::after {
    content: "";
    position: absolute;
    right: .35rem;
    top: 1.15rem;
    width: .55rem; height: .55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .75;
    transition: transform .25s ease;
  }
  #footer-menu .yj-fnav[open] > .yj-fnav__head::after { transform: rotate(-135deg); top: 1.35rem; }
  /* 畳めるようにしたぶん、項目そのものは押しやすい高さにする */
  #footer-menu .yj-fnav .sub-menu { margin: .2rem 0 1rem; padding-left: .9rem; }
  #footer-menu .yj-fnav .sub-menu > li { line-height: 1.7; }
  #footer-menu .yj-fnav .sub-menu > li + li { margin-top: .75rem; }
  /* 見出しの区切り線 */
  #footer-menu > li.menu-item-has-children { border-bottom: 1px solid; border-color: rgba(255, 211, 0, .28); }
}
@media (prefers-reduced-motion: reduce) {
  #footer-menu .yj-fnav > .yj-fnav__head::after { transition: none; }
}

/* ------------------------------------------------ フッター下段
   著作権表記・補助リンク・SNS を同じ並びの要素として置き、
   幅が足りないときは要素の単位で折り返す（文字の途中では折り返さない）。 */
.yj-fbot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 2rem;
}
.yj-fbot__copy {
  white-space: nowrap;
  letter-spacing: .02em;
  opacity: .85;
}
.yj-fbot__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
}
.yj-fbot__link {
  white-space: nowrap;
  transition: opacity .2s ease;
}
.yj-fbot__link:hover { text-decoration: underline; text-underline-offset: 4px; opacity: .8; }
.yj-fbot__sns { display: flex; gap: .6rem; margin-left: auto; }
@media (max-width: 767px) {
  /* 狭い画面では、まずリンクとSNS、著作権表記は最後に置く */
  .yj-fbot { justify-content: flex-start; gap: 1rem 1.5rem; }
  .yj-fbot__copy { order: 3; width: 100%; white-space: normal; }
  .yj-fbot__sns { margin-left: 0; }
}