/* ==========================================================================
   MarlSystem — 共通グローバルメニュー・全ページ共通の追加スタイル
   フッターのリンクがメニューと共通化され項目数が増えたため、狭い画面で折り返せるようにする。
   （1行に収まる幅では従来と同じ表示）
   ========================================================================== */

/* ---------- JavaScript 無効時の表示 ----------
   .reveal（スクロール時のフェードイン）は JavaScript で .in が付くまで非表示のため、
   JavaScript が動かない場合（<html> に ms-js が付かない場合）は最初から表示する。
   ms-js は <head> 内で描画前に付くため、JavaScript 有効時の演出・見た目は従来どおり。 */
html:not(.ms-js) .reveal{
  opacity: 1;
  transform: none;
}

.footer-links{
  flex-wrap: wrap;
  row-gap: 10px;
}

/* ---------- フッター：プライバシーポリシーへのリンク（コピーライトの横） ---------- */
.footer-privacy{
  display: inline-block;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  transition: color .3s var(--ease);
}
.footer-privacy:hover{ color: var(--brass-bright); }
@media (max-width: 640px){
  .footer-privacy{
    display: block;
    margin: 0;
    padding-left: 0;
    border-left: none;
  }
  /* NARROW の表示順：グローバルメニュー → プライバシーポリシー → コピーライト
     （HTMLの順序は変えず、WIDE は従来どおり「コピーライト＋プライバシーポリシー｜メニュー」） */
  .footer-links{ order: -1; }
  .footer-inner > p{
    display: flex;
    flex-direction: column-reverse; /* プライバシーポリシーをコピーライトの上に */
    gap: 6px;
    margin-top: 13px; /* メニューとの間隔を従来のグループ間（約29px）と同程度に */
  }
}

/* ---------- NARROW の文字組み（全ページ共通） ----------
   .ms-keep：NARROW ではこの語句の途中で改行しない（語句の区切りでのみ折り返す）。
   .ms-br-sp：480px以下でだけ有効になる改行（<br class="ms-br-sp">）。481px以上は自然な折り返し。 */
.ms-br-sp{ display: none; }
@media (max-width: 480px){
  .ms-br-sp{ display: inline; }
}
@media (max-width: 640px){
  .ms-keep{ display: inline-block; }
  /* 本文の最終行に1文字だけ残る折り返しを避ける（対応ブラウザのみ。非対応は従来どおり） */
  main p, main li, main td, main th, main .value, main .ledger-desc,
  main .case-title, main .case-desc, footer p{ text-wrap: pretty; }

  /* 即日／一貫／柔軟（トップ・会社概要）：中央揃えにし、説明文を読みやすい大きさに */
  .stats{ text-align: center; }
  .stat-label{ font-size: 15px; }

  /* お問い合わせ案内（.cta）：見出しと説明文の間隔 */
  .cta .section-title{ margin-bottom: 20px; }
}

/* ---------- スマホメニュー：閉じたパネルによる横はみ出しの解消 ----------
   header.site の backdrop-filter があると、子要素の nav.site（position: fixed）が
   画面ではなく header を基準に配置され、画面外へ逃がしたパネルが文書の横幅を広げてしまう。
   スマホ幅では背景と backdrop-filter を header の疑似要素へ移し、
   見た目（半透明の背景・ぼかし・スクロール時の濃さの変化）を変えずに nav を画面基準に戻す。 */
@media (max-width: 640px){
  header.site,
  header.site.scrolled{
    background: transparent;
    backdrop-filter: none;
  }
  header.site::before{
    content: "";
    position: absolute;
    inset: 0 0 -1px; /* 元の背景と同じく下罫線（1px）の下まで敷く */
    z-index: -1;
    background: rgba(250,247,240,.82);
    backdrop-filter: blur(6px);
    transition: background .4s var(--ease);
    pointer-events: none;
  }
  header.site.scrolled::before{
    background: rgba(250,247,240,.96);
  }
}

/* ---------- スマホメニュー：閉じているときはリンクにフォーカスさせない ----------
   閉じたパネルは画面外にあるが、visibility が visible のままだとキーボード操作で
   見えないリンクにフォーカスが移る。閉じるアニメーション（transform .4s）の後で
   visibility: hidden にし、開くときはすぐに visible にする（位置・色・余白・動きは従来どおり）。 */
@media (max-width: 640px){
  nav.site{
    visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s linear .4s;
  }
  nav.site.open{
    visibility: visible;
    transition: transform .4s var(--ease), visibility 0s linear 0s;
  }
}

/* ---------- スマホメニュー：パネル内の配置・ロゴ（全ページ共通） ----------
   メニュー項目を中央揃えから上寄せにし、最後の項目の下にロゴを続けて置く。
   画面の高さが低い場合はパネル内をスクロールできるようにし、項目・ロゴが見切れないようにする。
   項目の間隔（gap）・左右の余白・文字の設定は各ページのCSSのまま。 */
.nav-logo{ display: none; } /* WIDE の通常メニューでは表示しない */

@media (max-width: 640px){
  nav.site{
    height: 100vh;
    height: 100dvh; /* アドレスバーの表示・非表示に合わせた実際の表示領域の高さ */
    justify-content: flex-start;
    padding-top: clamp(80px, 15vh, 130px);
    padding-bottom: 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* 最後の項目からロゴまで：gap（30px）＋ margin で約60〜90px */
  .nav-logo{
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: min(100%, 180px);
    height: auto;
    margin-top: clamp(30px, 7vh, 60px);
  }

  /* メニューを開いている間、パネルの外側（ページ全体）を透明な面で覆う。
     外側のタップでメニューを閉じ、背後のリンク・ボタンが押されないようにする（assets/js/main.js）。
     ヘッダー内に置くため、パネル（z-index: 50）より下・ページ本文より上になる */
  header.site.menu-open::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: auto;
  }
  /* ×ボタンは覆いの上に出し、そのまま操作できるようにする */
  header.site .nav-toggle{
    position: relative;
    z-index: 51;
  }

  /* 三本線 ⇔ ×（全ページ共通。開いている間は aria-expanded="true"）
     線は高さ1px・間隔10.5px（上 0px／中 10.5px／下 21px）のため、上下の線を中央へ移動して±45度回転させる */
  .nav-toggle span{
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(10.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-10.5px) rotate(-45deg); }
}