@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ============================================================================
   ヘッダー（#ml-header）
   ============================================================================ */

/* --- デザイントークン + ルート --- */
#ml-header {
  --ml-navy: #1d2853;    /* 上段背景（primary） */
  --ml-navy-fg: #f4f7ff; /* 上段文字（primary-foreground） */
  --ml-gold: #c29f63;    /* キャッチコピー */
  --ml-orange: #ff5000;  /* ハイライト（tag-primary） */
  --ml-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  font-family: "Montserrat", "Noto Sans JP", ui-sans-serif, system-ui,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--ml-shadow-sm);
  display: block;

  /* Zoho Desk はカスタムヘッダーを flex(column, align-items:center) の .Header__header で
     ラップするため、既定だと子(#ml-header)が中身幅に縮んで中央寄せされ、バー左右に余白が出る。
     width:100% / align-self:stretch でラッパー全幅まで伸ばす（バーは全幅、中身は 1200px 中央寄せ）。 */
  width: 100%;
  align-self: stretch;
}

#ml-header *,
#ml-header *::before,
#ml-header *::after {
  box-sizing: border-box;
}
#ml-header a {
  color: inherit;
  text-decoration: none;
}
#ml-header svg,
#ml-header img {
  display: block;
}

/* --- 上段（ネイビー全幅） --- */
#ml-header .ml-top {
  background: var(--ml-navy);
  color: var(--ml-navy-fg);
}
#ml-header .ml-top-inner {
  /* 中身は最大 1200px で中央寄せ（本サイト max-w-wide 準拠）。左右 24px はガター。 */
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 8px 24px;
}
@media (min-width: 640px) {
  #ml-header .ml-top-inner {
    padding: 16px 24px;
  }
}

/* 左ゾーン: ロゴ + キャッチコピー（default 縦並び / sm 以上 横並び） */
#ml-header .ml-left {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: flex-start;
  column-gap: 20px;
  row-gap: 8px;
}
@media (min-width: 640px) {
  #ml-header .ml-left {
    flex-direction: row;
    align-items: center;
  }
}

/* ロゴ */
#ml-header .ml-logo {
  flex-shrink: 0;
  display: inline-flex;
}
#ml-header .ml-logo svg,
#ml-header .ml-logo img {
  display: block;
  width: 122px;
  height: auto;
  margin-top: -8px; /* ロゴ上部の装飾の飛び出し分を上方向に補正（本サイト準拠） */
}
@media (min-width: 640px) {
  #ml-header .ml-logo svg,
  #ml-header .ml-logo img {
    width: 136px;
    margin-top: -9px;
  }
}
@media (min-width: 768px) {
  #ml-header .ml-logo svg,
  #ml-header .ml-logo img {
    width: 175px;
    margin-top: -12px;
  }
}

/* キャッチコピー（default: ロゴ下 / sm-md: 中央 / lg: 右寄せ） */
#ml-header .ml-catch {
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--ml-gold);
}
#ml-header .ml-catch .ml-hl {
  color: var(--ml-orange);
}
@media (min-width: 640px) {
  #ml-header .ml-catch {
    flex: 1 1 0%;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
@media (min-width: 1024px) {
  #ml-header .ml-catch {
    margin-left: auto;
    margin-right: 20px;
    flex: none;
    text-align: right;
  }
}

/* ============================================================================
   フッター（#ml-footer）
   ============================================================================ */

/* --- デザイントークン + ルート --- */
#ml-footer {
  --ml-navy: #1d2853;    /* 背景（primary） */
  --ml-navy-fg: #f4f7ff; /* 文字（primary-foreground） */

  /* このブロック配下だけを本サイトと同じフォントに揃える */
  font-family: "Montserrat", "Noto Sans JP", ui-sans-serif, system-ui,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: block;
  background: var(--ml-navy);
  color: var(--ml-navy-fg);
  /* Zoho Desk はカスタム HTML を flex(column, align-items:center) のラッパーで包むことが
     あり、既定だと子(#ml-footer)が中身幅に縮んで中央寄せされ、バー左右に余白が出る。
     align-self:stretch / width:100% でラッパー全幅まで伸ばす（バーは全幅、中身は
     max-width:1200px 中央寄せ＝本サイトと同じ挙動。ヘッダーと同じ対策）。 */
  width: 100%;
  align-self: stretch;
}

/* 配下の要素をリセット（Zoho Desk の既定スタイルに影響されないように） */
#ml-footer *,
#ml-footer *::before,
#ml-footer *::after {
  box-sizing: border-box;
}
#ml-footer a {
  color: inherit;
  text-decoration: none;
}
#ml-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#ml-footer svg {
  display: block;
}

/* 内側コンテナ: 内容は最大 1200px で中央寄せ（本サイト max-w-wide 準拠）。
   左右 32px / 上下 16px / 上段と下段の行間 24px（Footer.tsx の px-8 py-4 gap-6）。 */
#ml-footer .ml-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 32px;
}

/* --- 上段（ロゴ + SNS） --- */
#ml-footer .ml-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#ml-footer .ml-footer-logo {
  display: block;
  width: 175px;
  height: 63px;
  object-fit: contain;
}

/* SNS アイコン列（全ブレイクポイントで表示）。アイコン高さ 18px / 間隔 10px。 */
#ml-footer .ml-footer-social {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}
#ml-footer .ml-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#ml-footer .ml-footer-social a:hover {
  opacity: 0.8;
}
#ml-footer .ml-footer-social svg {
  height: 18px;
  width: auto;
}

/* --- 下段（法務系 5 リンク） --- */
/* 全幅で左寄せ・折り返し可（flex-wrap）。狭幅（375/640）は折り返し、広幅（768 以上）は
   1 行になる（横スクロールを構造的に防ぐ）。文字は 375 幅のみ 14px、640 以上 16px。 */
#ml-footer .ml-footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 26px;
  row-gap: 8px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
@media (min-width: 640px) {
  #ml-footer .ml-footer-nav {
    font-size: 16px;
  }
}
#ml-footer .ml-footer-nav a {
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#ml-footer .ml-footer-nav a:hover {
  opacity: 0.8;
}