/* ============================================================
   japan-used-tractors.com 多言語用の追加デザイン
   （style.css は 9818.jp から写したもの。ここには新サイトだけの追加分を書く）
   1. 言語の切り替えメニュー（ヘッダー右上）と、フッターの言語一覧
   2. 言語ごとの文字の形（ベトナム語・クメール語・アラビア語）
   3. アラビア語（右から左に読む）用の左右反転
   ============================================================ */

/* ---------- 1. 言語の切り替えメニュー ---------- */
.lang-menu{position:relative;flex:none}
.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:40px;font-family:var(--f-en);font-weight:700;font-size:.78rem;letter-spacing:.1em;line-height:1;white-space:nowrap;user-select:none;transition:background .25s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{background:rgba(127,160,170,.22)}
.lang-menu summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lang-menu .lm-globe{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lang-menu .lm-chev{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.lang-menu[open] .lm-chev{transform:rotate(180deg)}
.lang-menu ul{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:1002;min-width:210px;margin:0;padding:8px;list-style:none;background:#fff;color:var(--navy);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.lang-menu li a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-radius:10px;font-size:.95rem;line-height:1.4;letter-spacing:0;color:var(--navy);white-space:nowrap}
.lang-menu li a:hover,.lang-menu li a:focus-visible{background:var(--tint)}
.lang-menu li a[aria-current]{font-weight:700;background:var(--mint)}
.lang-menu li a[aria-current]::after{content:"";width:7px;height:12px;margin-inline-end:4px;border-right:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(45deg) translateY(-2px);flex:none}
.lang-menu .lm-jp{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.lang-menu .lm-jp small{font-size:.72rem;color:var(--ink-soft);font-weight:400}
@media (max-width:1023px){
  .lang-menu summary{padding:0 9px;gap:5px}
}
/* スマホの細い画面: ロゴ・言語・カート・メニューの4つが1行に収まるよう詰める
   （元のデザインは幅 360px 以下でメニューボタンが画面の外にはみ出していた） */
@media (max-width:480px){
  .site-header .head-in{padding:0 14px;gap:10px}
  .site-header .logo{gap:8px;min-width:0}
  .site-header .logo-mark{width:50px;height:24px}
  .site-header .logo-name{font-size:.95rem;letter-spacing:.14em}
  .site-header .logo-sub{display:none}
  .head-tools{gap:4px;flex:none}
  .lang-menu .lm-globe{display:none}
  .lang-menu summary{padding:0 6px;height:40px}
  .lang-menu ul{min-width:190px}
  .cart-btn{height:40px;padding:0 10px}
  .nav-toggle{flex:none}
}
@media (max-width:350px){
  .site-header .logo-name{display:none}
}
/* スマホ: カートの個数の印は、ボタンの右肩に重ねて出す（品物を入れてもヘッダーの幅が変わらないように） */
@media (max-width:1023px){
  .cart-btn{position:relative}
  .cart-btn .cart-n{position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;padding:0 5px;margin:0;font-size:.64rem;box-shadow:0 0 0 2px #fff}
}

/* ---------- カートページ（スマホ）: 個数売りの品を入れても横にはみ出さないよう2段に折り返す ---------- */
@media (max-width:560px){
  .cart-row{flex-wrap:wrap;row-gap:8px}
  .cart-info{flex:1 1 calc(100% - 154px)}
  .cart-remove{order:2}
  .cart-qty{order:3;margin-inline-start:94px}
  .cart-price{order:4;margin-inline-start:auto}
}
/* 送信後の表示やエラーの表示が、固定ヘッダー・下の固定バーに隠れないようにする */
.form-status{scroll-margin:96px 0}
/* 準備ができるまで押せない送信ボタン */
.btn[disabled]{opacity:.55;cursor:default}

/* フッターの言語一覧 */
.foot-lang{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:8px;padding:22px 5% 0;border-top:1px solid rgba(255,255,255,.12)}
.foot-lang a{font-size:.88rem;color:#DCE8F1;line-height:1.8;transition:color .3s}
.foot-lang a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot-lang a[aria-current]{color:#fff;font-weight:700}

/* ---------- 2. 言語ごとの文字の形 ---------- */
html[lang="vi"]{
  --f-jp:"Noto Sans","Noto Sans JP",Arial,sans-serif;
  --f-en:"Lexend Mega","Noto Sans",sans-serif;
  --f-min:"Noto Serif","Times New Roman",serif;
}
html[lang="km"]{
  --f-jp:"Noto Sans JP","Noto Sans Khmer","Khmer OS Battambang","Leelawadee UI","Khmer UI",sans-serif;
  --f-en:"Lexend Mega","Noto Sans Khmer","Khmer OS Battambang","Leelawadee UI",sans-serif;
  --f-min:"Noto Sans Khmer","Khmer OS Battambang","Leelawadee UI",serif;
}
html[lang="ar"]{
  --f-jp:"Noto Sans Arabic","Noto Sans JP","Segoe UI",Tahoma,sans-serif;
  --f-en:"Lexend Mega","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-min:"Noto Sans Arabic","Segoe UI",Tahoma,serif;
}
/* クメール文字・アラビア文字は、文字の間を空けると読みにくくなる（アラビア文字はつながりが切れる）ので空けない。
   英字だけの飾り（ロゴの CLOSER・言語の記号・背景の大きな英字）は元のまま */
html[lang="km"] body,html[lang="km"] body *:not(.logo-name):not(.lm-cur):not(.bg-letter),
html[lang="ar"] body,html[lang="ar"] body *:not(.logo-name):not(.lm-cur):not(.bg-letter){letter-spacing:0!important}
/* 同じ大きさの指定でも英字より小さく見える文字なので、全体を少しだけ大きくする */
html[lang="km"],html[lang="ar"]{font-size:106.25%}
/* 上下に飾りの付く文字なので、行の高さを詰めすぎない */
html[lang="km"] .gnav > a,html[lang="ar"] .gnav > a,html[lang="km"] .logo-sub,html[lang="ar"] .logo-sub{line-height:1.5}
html[lang="km"] .gnav > a small,html[lang="ar"] .gnav > a small{margin-top:2px}
html[lang="km"] .page-ttl .pt-en,html[lang="ar"] .page-ttl .pt-en{line-height:1.45}
html[lang="km"] .pt-mini-ttl,html[lang="ar"] .pt-mini-ttl{line-height:1.5}
html[lang="km"] .btn,html[lang="ar"] .btn{line-height:1.7}
html[lang="km"] .head-cta,html[lang="ar"] .head-cta,html[lang="km"] .cart-btn .cart-lbl,html[lang="ar"] .cart-btn .cart-lbl{line-height:1.6}
html[lang="km"] .foot-nav h4,html[lang="ar"] .foot-nav h4,html[lang="km"] .sec-mini,html[lang="ar"] .sec-mini{line-height:1.7}
/* 飾りの大きな英字（TRACTORS／CONTACT US）と 404 の数字は、どの言語でも英字の形のまま */
.bg-letter,.err-page .big{font-family:"Lexend Mega",sans-serif;direction:ltr}

/* ---------- 3. アラビア語（右から左）用の左右反転 ---------- */
[dir="rtl"] .skip{left:auto;right:-999px}
[dir="rtl"] .skip:focus{left:auto;right:8px}
[dir="rtl"] .hp{left:auto;right:-9999px}
[dir="rtl"] .bg-letter{left:auto;right:-14px}
[dir="rtl"] .btn{padding:15px 28px 15px 64px}
[dir="rtl"] .btn .arrow{right:auto;left:14px}
[dir="rtl"] .btn-sm{padding:11px 22px 11px 52px}
[dir="rtl"] .btn-sm .arrow{right:auto;left:10px}
[dir="rtl"] .arrow svg{transform:scaleX(-1)}
[dir="rtl"] .foot-nav a small{margin-left:0;margin-right:6px}
[dir="rtl"] .totop{right:auto;left:22px}
[dir="rtl"] .page-ttl .pt-bg{right:auto;left:0;border-radius:0 24px 0 0}
[dir="rtl"] .page-ttl .pt-jp{padding-left:0;padding-right:96px}
[dir="rtl"] .page-ttl .pt-jp::before{left:auto;right:12px}
[dir="rtl"] .crumb li+li::before{margin:0 2px 0 8px}
[dir="rtl"] .flow li:not(:last-child)::after{right:auto;left:-12px;transform:translateY(-50%) rotate(-135deg)}
[dir="rtl"] .faq summary .pm{margin-left:0;margin-right:auto}
[dir="rtl"] .prose h2{padding-left:0;padding-right:16px;border-left:0;border-right:3px solid var(--teal)}
[dir="rtl"] .prose ul{margin:10px 1.4em 10px 0}
[dir="rtl"] .prose .sign{text-align:left}
[dir="rtl"] .sc-img .badge,[dir="rtl"] .unit-photo .badge{left:auto;right:12px}
[dir="rtl"] .unit-spec th,[dir="rtl"] .unit-spec td{text-align:right}
[dir="rtl"] .sf-lbl{margin-right:0;margin-left:4px}
[dir="rtl"] .sc-yard{margin-left:0;margin-right:8px}
[dir="rtl"] .cart-n{margin-left:0;margin-right:8px}
[dir="rtl"] .cart-btn .cart-n{margin-right:0}
[dir="rtl"] .cart-total{text-align:left}
[dir="rtl"] .cart-price small{text-align:left}
[dir="rtl"] .unit-price{border-left:0;border-right:5px solid var(--accent)}
[dir="rtl"] .up-v small{margin-left:0;margin-right:8px}
[dir="rtl"] .lang-menu li a[aria-current]::after{transform:rotate(45deg) translateY(-2px)}
/* 電話番号は、右から左の文の中でも左から右の並びのまま見せる（＋やハイフンの位置が崩れないように） */
[dir="rtl"] .tel-big b,[dir="rtl"] .tcl-num,[dir="rtl"] .foot-brand a[href^="tel:"],[dir="rtl"] .tel-card p a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .gnav .tel{direction:ltr}
[dir="rtl"] .gnav .tel small{direction:rtl;unicode-bidi:isolate}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{direction:ltr;text-align:right}
/* 英字だけの行（住所・社名・電話番号の行）は、行ごとに「左から右」で並べる。位置は右寄せのまま
   （そのままだと「85-4 Nakanuma-cho,」の番地や行末の「.」「,」が反対側へ飛んでしまう） */
[dir="rtl"] .foot-brand p,[dir="rtl"] .foot-nav .fp,[dir="rtl"] .tel-card p,[dir="rtl"] .prose .box p,
[dir="rtl"] .site-footer .logo-sub{unicode-bidi:plaintext;text-align:right}
[dir="rtl"] .copyright{direction:ltr}
@media (max-width:1023px){
  [dir="rtl"] .gnav{right:auto;left:0;transform:translateX(-100%)}
  [dir="rtl"] .gnav.open{transform:none}
  [dir="rtl"] .gnav > a{align-items:flex-start;padding:16px 4px 16px 32px}
  [dir="rtl"] .gnav > a::after{right:auto;left:10px;transform:rotate(-135deg)}
}
@media (max-width:767px){
  [dir="rtl"] .totop{left:14px}
  [dir="rtl"] .page-ttl .pt-jp{padding-right:48px}
  [dir="rtl"] .page-ttl .pt-jp::before{right:4px}
}

/* ---------- スマホでは、上のメニュー（ヘッダー）を画面に付いてこさせない（2026-10-13 加藤さんの指示） ----------
   ページの一番上にだけ出て、下へ読み進めると一緒に流れていく。
   お問い合わせとカートは、スマホでは画面下の固定バーからいつでも行ける。パソコンとタブレットは今までどおり付いてくる */
@media (max-width:767px){
  .site-header{position:absolute}
  /* 流れていく途中で白い帯に切り替わらないよう、一番上のときの見た目（透明・白い文字と白いロゴ）のままにする */
  .site-header.is-scrolled:not(.is-solid){background:transparent;color:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header.is-scrolled:not(.is-solid) .lm-w{opacity:1}
  .site-header.is-scrolled:not(.is-solid) .lm-c{opacity:0}
  /* メニューを開いている間だけは、閉じるボタンが画面の外へ行かないよう画面に固定する（main.js が nav-open を付ける） */
  .site-header.nav-open{position:fixed}
  /* 付いてくるヘッダーが無いので、ページ内の行き先（#stock など）の上に空けていた余白を詰める */
  html{scroll-padding-top:12px}
}