/* ヘッダーの見た目替え（2026-09-21 本人指示）。
   1) PCメニューを「上に小さく英語・下に主役の日本語」の2段に
   2) お問い合わせボタンをメールのアイコンから「FIZに相談する」の文字ボタンに
   common.css は SCSS から作られるファイルなので直接は書き換えず、こちらに追記する形にする。
   common.css 側の指定より後に読み込むことで、詳細度をそろえたまま上書きする（!important は使わない） */

/* ---- 1) PCメニューの2段化 ---- */
/* 元の a はテキストがそのまま流れるだけだったので、上下2段に積む箱にする。
   1024px 未満（ハンバーガーのみの幅）ではメニュー自体が display:none なので影響しない */
.site-header__menuList > .site-header__menuList-item > a { /* 直下のリンクだけ。展開メニューの中のリンクに当てない（レビュー指摘 2026-09-21） */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hd-menu__en {
  /* 2026-09-24 DADS対応: 11px→14px（最小14px。装飾文字でも下限は守る） */
  font-family: "Josefin Sans", sans-serif;
  font-size: var(--font-size-min, 14px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.hd-menu__ja {
  /* 日本語が主役：太字(700)・白 */
  display: block;
  margin-top: 3px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  white-space: nowrap; /* 同上。折り返すと2段×2行になって縦に間延びするので、横幅は文字なりに広げる */
}

/* 1024〜1279px は6項目＋ボタンが窮屈になりやすいので、項目間隔と文字サイズを少し詰める。
   表の言葉（プロジェクト実績など）はそのまま変えない（本人が「表のままでOK」と決めている） */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .site-header__menuList-item:not(:first-child) {
    margin-left: 10px;
  }
  /* 2026-09-24 DADS対応: 文字を14px未満に縮めて詰める案はやめた（最小14pxを守るため）。
     この幅では文字を縮めず、メニュー全体をたたんでハンバーガーボタンだけにする（下の「メニューの折りたたみ」ブロック）。 */
  /* お問い合わせボタンの左右余白も詰めて、メニューとの間を確保する（1024〜1279px だけ。実測で「プロジェクト実績」を含む6項目がボタンと重なったための調整・2026-09-21） */
  .site-header__buttons .contact-button__link {
    padding: 0 14px;
  }
}

/* ---- メニューの折りたたみ（2026-09-24 DADS対応） ----
   ラベルを14px未満に縮めて詰め込むのをやめたため、1024〜1279px は6項目が入りきらない。
   この幅ではスマホと同じ「ハンバーガーボタンだけ」にし、1280px以上でフルの横並びメニューを出す。
   common.css 側の「1024px以上でメニューを表示・ハンバーガーは常時表示」を、この幅だけ上書きする。 */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .site-header__menuList {
    display: none;
  }
}
/* 2026-09-24 本人決定: 1280px以上ではフルメニューだけにし、ハンバーガーボタンは隠す
   （直す前は common.css 側にハンバーガーを隠す指定が無く、1024px以上でも両方出ていた不具合） */
@media screen and (min-width: 1280px) {
  .site-header__buttons .menu-button {
    display: none;
  }
}

/* SERVICE の展開メニュー（service-nav.css）は、2段になったメニューの下に出る。
   .svc-nav-sub は親要素 .svc-nav-has-sub の下端（top:100%）基準なので、2段化の影響は自動で追従する */

/* ---- 2) お問い合わせボタン：アイコンの丸ボタン → 文字の角丸ボタン ---- */
/* 汎用の .button（アイコンを中央に丸く置く仕組み）は使わず、専用の見た目をここで組み立てる */
.site-header__buttons .contact-button {
  width: auto;
  height: 40px;
  border-radius: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .contact-button {
    height: 40px;
  }
}
.site-header__buttons .contact-button__link {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1), color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1), color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__buttons .contact-button__link {
    transition: none;
  }
}
.contact-button__text {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: 13px→14px */
  line-height: 1;
  color: #c10000; /* 白地に赤（#C10000）はコントラスト比 4.5:1 以上（DADS基準） */
  white-space: nowrap;
}
/* PCはフル文言「FIZに相談する」、スマホ（ハンバーガーのみの幅＝1024px未満）は「相談する」に短縮。
   読み上げは a の aria-label「FIZに相談する」で1本化しているので、見た目の切り替えだけでよい */
.contact-button__text-short {
  display: inline;
}
.contact-button__text-full {
  display: none;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .contact-button__link {
    padding: 0 24px;
  }
  .contact-button__text {
    font-size: 14px;
  }
  .contact-button__text-short {
    display: none;
  }
  .contact-button__text-full {
    display: inline;
  }
  /* カーソルを載せたときの動きは、サービスページの赤い帯の上の白いボタンと同じにする（2026-09-21 本人指示。その白いボタンは 2026-09-24 に使う場所が無くなり削除。動きの値はこのファイルにある）。
     白地を抜いて、白い枠線と白い文字に反転する。以前の「赤で塗りつぶす」は、赤い帯の上でボタンが帯に溶けて消えて見えた */
  .site-header__buttons .contact-button {
    transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1), box-shadow 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  }
  .site-header__buttons .contact-button:hover,
  .site-header__buttons .contact-button:focus-within {
    background: transparent;
    box-shadow: inset 0 0 0 2px #fff;
  }
  .site-header__buttons .contact-button:hover .contact-button__text,
  .site-header__buttons .contact-button:focus-within .contact-button__text {
    color: #fff;
  }
  .site-header__buttons .contact-button .contact-button__text {
    transition: color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header__buttons .contact-button,
    .site-header__buttons .contact-button .contact-button__text { transition: none; }
  }
}

/* ボタン（高さ40px）とハンバーガー（30〜35px）の縦の中心をそろえる。common.css は上ぞろえのままなので、ここで中央ぞろえにする（レビュー指摘 2026-09-21） */
.site-header__buttons { align-items: center; }
/* キーボードで来たときのフォーカスの枠を、ボタンの丸さに合わせる（四角くはみ出していた） */
.site-header__buttons .contact-button__link { border-radius: inherit; }
/* ハンバーガーのボタンを「相談する」ボタンと同じ高さ 40px にそろえる（2026-09-21 本人指示。スマホも PC も同じ）。
   元は スマホ 30px・PC 35px。中の三本線の絵は、丸に対する比率（元は 20/30・25/35 ≒ 0.7）を保って 28px にする。
   絵の置き方（丸の中央に絶対配置）は common.css のまま変えない。flex にすると、幅の決まっていない SVG が丸いっぱいに引き伸ばされた */
.site-header__buttons .menu-button.button { width: 40px; height: 40px; }
.site-header__buttons .menu-button.button button img { height: 28px; width: auto; }

/* ---- スマホ（1024px未満）は帯の高さを元の60pxに戻す ----
   理由：70pxは実機で見ると画面を取りすぎて邪魔だった（2026-09-21・本人が実機で確認）。
   上下の余白 12px ＋ ボタン 36px ＝ 60px。PCは70pxのまま */
@media screen and (max-width: 1023px) {
  .site-header { padding-top: 12px; padding-bottom: 12px; }
  .site-header__buttons .contact-button { height: 36px; }
  .site-header__buttons .contact-button__link { padding: 0 14px; }
  .site-header__buttons .menu-button.button { width: 36px; height: 36px; }
  .site-header__buttons .menu-button.button button img { height: 24px; }
}