@charset "UTF-8";
/* 新しいヘッダー（案 A-1）
 * 「ご検討中の方」：導入のご相談・申し込み（ボタン）
 * 「ご利用中の方」：サポート（枠なしのテキストリンク。外部のサポートサイトへ）
 * style.css の .header / .nav をベースに、.hd- で始まるクラスだけ上書きする
 * 使うページは <nav class="nav hd-nav"> の中身を order.html と同じにして、このファイルを読み込む
 */

/* PC */
.hd-nav { gap: 2.4rem; }
.hd-nav .hd-links { align-items: center; margin: 0; font-size: 1.6rem; }
.hd-nav .hd-links > li { margin-left: 3.2rem; }
.hd-nav .hd-links > li:first-child { margin-left: 0; }
.hd-ext { margin-left: .4rem; font-size: 1.4rem; }

/* 「ご検討中の方」などの見出しはボタンの上に浮かせ、メニュー・ボタン・サポートの高さの中心をそろえる */
.hd-nav { align-items: center; }
.hd-group { position: relative; display: flex; align-items: center; }
.hd-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .4rem; font-size: 1.2rem; color: #6B5B54; line-height: 1.2; white-space: nowrap; }
.hd-btns { display: flex; gap: .8rem; }
.hd-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 11.8rem; height: 4rem; padding: 0 2rem; border-radius: 2rem; font-size: 1.6rem; font-weight: bold; white-space: nowrap; }
.hd-btn-main { background: #07A994; color: #fff; border: 2px solid #07A994; }
.hd-btn-sub { background: #fff; color: #07A994; border: 2px solid #07A994; }

.hd-group-user { padding-left: 2.4rem; border-left: 1px solid #E3D9D2; }
.hd-group-user .hd-label { left: calc(50% + 1.2rem); }
.hd-support { display: inline-flex; align-items: center; gap: .4rem; height: 4rem; font-size: 1.6rem; color: #4F403A; white-space: nowrap; }
.hd-support .ion-headphone { font-size: 1.8rem; }

@media (hover: hover) {
  .hd-btn-main:hover { background: #068F7D; border-color: #068F7D; }
  .hd-btn-sub:hover { background: #EAF7F4; }
  .hd-support:hover { color: #07A994; }
}

/* 幅が狭い PC では余白を詰める */
@media only screen and (min-width: 805px) and (max-width: 1180px) {
  .hd-nav { gap: 1.6rem; }
  .hd-nav .hd-links > li { margin-left: 2rem; }
  .hd-btn { min-width: 0; padding: 0 1.4rem; }
  .hd-group-user { padding-left: 1.6rem; }
}

/* スマホ（メニューを開いたとき） */
@media only screen and (max-width: 804px) {
  .hd-nav { flex-direction: column; justify-content: flex-start; gap: 0; padding: 8.1rem 0 5rem; }
  .hd-nav .hd-links { display: block; padding: 0 0 4rem; }
  .hd-nav .hd-links > li { margin-left: 0; }
  .hd-group { flex-direction: column; width: 80%; margin: 0 auto; gap: .8rem; }
  .hd-label, .hd-group-user .hd-label { position: static; transform: none; margin: 0; font-size: 1.4rem; }
  .hd-btns { flex-direction: column; width: 100%; gap: 1.2rem; }
  .hd-btn { width: 100%; height: 6rem; border-radius: 999px; }
  .hd-group-user { margin-top: 3.2rem; padding: 2.4rem 0 0; border-left: 0; border-top: 1px solid #E3D9D2; }
  .hd-support { height: 4.8rem; }
}