/* ============================================================
   amcc-site.css
   www.contact.am-consulting.co.jp 全体のデザイン
   - 上部に帆船の写真(img/sail-navy.jpg)、下は紺に溶け込む
   - 本文は枠なし(紺の地に直接。コンタクトのフォームも同様)
   - トップページ(タイトルを持たないページ)は、写真を画面いっぱいに表示

   ※ 画像のパスは、このCSSファイルのある場所が基準です。
      img フォルダは、このファイルと同じ階層に置いてください。
   ============================================================ */

:root {
  --amc-navy: #0a2240;
  --amc-navy-2: #1e3a5f;
  --amc-gold: #e0bb70;
  --amc-link: #1d5aa8;
}

html { background: var(--amc-navy); }

body {
  position: relative;
  min-height: 100vh;
  background: transparent !important;   /* 下地は html の紺。写真は ::before で表示 */
}

/* ===== 上部の写真(トップ以外のページ) ===== */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 560px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--amc-navy);
  background-image:
    linear-gradient(180deg,
      rgba(7, 26, 51, .62) 0,
      rgba(7, 26, 51, .28) 140px,
      rgba(7, 26, 51, 0) 260px,
      rgba(7, 26, 51, 0) calc(100% - 200px),
      #0a2240 100%),
    url("img/sail-navy.jpg");
  background-position: center, 0% 70%;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
}

/* ===== トップページ(タイトルが空のページ): 写真を画面いっぱいに =====
   index.qmd にはタイトルがなく、Quarto は空の #title-block-header を出力するため、
   「空であること」でトップページを見分ける */
body:has(#title-block-header:empty)::before {
  position: fixed;
  inset: 0;
  height: auto;
  background-image:
    linear-gradient(180deg,
      rgba(7, 26, 51, .62) 0,
      rgba(7, 26, 51, .28) 140px,
      rgba(7, 26, 51, 0) 260px,
      rgba(7, 26, 51, 0) calc(100% - 120px),
      rgba(7, 26, 51, .5) 100%),
    url("img/sail-navy.jpg");
  background-position: center, 0% 50%;
}
body:has(#title-block-header:empty) #quarto-content { display: none !important; }
body:has(#title-block-header:empty) footer.footer { display: none !important; }   /* トップページはフッターを表示しない */

/* ===== ナビバー ===== */
#quarto-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
}
#quarto-header .navbar {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: background-color .25s ease;
}
#quarto-header .navbar > .container-fluid {
  padding-left: clamp(16px, 4.4vw, 64px);
  padding-right: clamp(16px, 4.4vw, 64px);
}
/* スクロールしたら紺の背景を付ける(白いシートの上でも文字が読めるように) */
body.amcc-scrolled #quarto-header .navbar {
  background: rgba(10, 34, 64, .94) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}

/* 会社名(帆のマークは一時的に非表示。戻すには display を inline-block にする) */
#quarto-header .navbar-brand { color: #fff; }
#quarto-header .navbar-title {
  color: #fff;
  font-size: clamp(12px, 3.6vw, 16px);
  white-space: normal;
}
#quarto-header .navbar-title::before {
  content: "";
  display: none;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  vertical-align: middle;
  background: url("img/sail-mark.svg") center / contain no-repeat;
}

/* メニューを広げて表示する幅(1400px以上)では、会社名もメニューも改行させない */
@media (min-width: 1400px) {
  #quarto-header .navbar-title,
  #quarto-header .navbar-nav .nav-link { white-space: nowrap; }
}

/* メニューの項目 */
#quarto-header .navbar-nav .nav-link {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  padding: .25rem 0;
  margin-left: 20px;
  border-bottom: 1.5px solid transparent;
}
#quarto-header .navbar-nav .nav-link:hover,
#quarto-header .navbar-nav .nav-link:focus-visible {
  color: var(--amc-gold);
}
#quarto-header .navbar-nav .nav-link.amcc-current,
#quarto-header .navbar-nav .nav-link.active {
  color: var(--amc-gold);
  border-bottom-color: var(--amc-gold);
}

/* ハンバーガーボタン */
#quarto-header .navbar-toggler {
  border: 0;
  box-shadow: none;
  padding: .4rem;
}
#quarto-header .navbar-toggler:focus-visible {
  outline: 2px solid var(--amc-gold);
  outline-offset: 2px;
}

/* 幅が狭いとき: メニューをナビバーの右下に浮かぶカードにする */
@media (max-width: 1399.98px) {
  /* Quarto の navbar-expand-* の指定(_quarto.yml の collapse-below)に左右されず、
     1400px未満では必ずハンバーガーメニューにする */
  #quarto-header .navbar-toggler { display: block !important; }
  /* 会社名は左端、3本線のボタンは右端に置く(Quarto の mx-auto による中央寄せを打ち消す) */
  #quarto-header .navbar-brand-container { margin-left: 0 !important; margin-right: auto !important; }
  #quarto-header .navbar-toggler { margin-left: auto; }
  #quarto-header #navbarCollapse:not(.show):not(.collapsing) { display: none !important; }
  #quarto-header #navbarCollapse.show { display: block !important; }
  #quarto-header #navbarCollapse .navbar-nav { flex-direction: column; align-items: stretch; }
  #quarto-header #navbarCollapse {
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    padding: 8px;
    background: rgba(10, 34, 64, .97);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
  }
  #quarto-header #navbarCollapse .navbar-nav .nav-link {
    margin: 0;
    padding: .7rem 1rem;
    border-bottom: 0;
    border-radius: 8px;
  }
  #quarto-header #navbarCollapse .navbar-nav .nav-link:hover,
  #quarto-header #navbarCollapse .navbar-nav .nav-link:focus-visible {
    background: rgba(255, 255, 255, .10);
  }
  #quarto-header #navbarCollapse .navbar-nav .nav-link.amcc-current,
  #quarto-header #navbarCollapse .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, .14);
  }
}

/* ===== 本文: 白いシート ===== */
#quarto-content.page-columns { display: block !important; }
#quarto-sidebar,
#quarto-margin-sidebar { display: none !important; }
#quarto-content { padding: 0 12px; }

/* 枠なし: 写真(上部560px)の下から、紺の地に直接、本文を置く */
main.content#quarto-document-content {
  grid-column: auto !important;
  box-sizing: border-box;
  width: min(960px, 100%);
  margin: 500px auto 56px;
  padding: 0 0 40px;
  background: transparent;
  color: #f1f5fa;
  font-size: 16px;
  line-height: 1.9;
}
@media (max-width: 640px) {
  main.content#quarto-document-content { padding: 0 8px 28px; }
}

/* タイトル */
#title-block-header { margin-bottom: 24px; }
#title-block-header::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--amc-gold);
  margin-bottom: 20px;
}
main h1.title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
}

/* 見出し・段落・リンク */
main h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  border-bottom: 2px solid var(--amc-gold);
  padding-bottom: .3em;
  margin: 2.2em 0 1em;
}
main h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--amc-gold);
  margin: 1.8em 0 .6em;
}
main p { margin: 0 0 1em; overflow-wrap: anywhere; }
main a {
  color: #a9cdf5;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
main a:hover { color: var(--amc-gold); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amc-gold);
  outline-offset: 3px;
}

/* ===== 箇条書きのページ(法人概要・代表取締役): 左に項目名、右に内容 ===== */
main.content > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
main.content > ul > li {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  column-gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
main.content > ul > li > strong:first-child {
  grid-column: 1;
  color: var(--amc-gold);
  font-weight: 600;
}
main.content > ul > li > ul,
main.content > ul > li > ol {
  grid-column: 2;
  margin: 0;
  padding-left: 0;
}
main.content > ul > li > ul { list-style: none; }
main.content > ul > li > ol { list-style: decimal; padding-left: 1.6em; }
main.content > ul > li li { margin: 0; }
@media (max-width: 640px) {
  main.content > ul > li { grid-template-columns: 1fr; }
  main.content > ul > li > ul,
  main.content > ul > li > ol { grid-column: 1; }
}

/* ===== フッター ===== */
footer.footer,
footer.footer .nav-footer {
  background: transparent !important;
}
footer.footer {
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #e6eef8;
  padding: 24px clamp(16px, 4.4vw, 64px);
  font-size: 14px;
}
footer.footer .nav-footer { border-top: 0; padding: 0; font-size: 14px; }
footer.footer .nav-footer-left, footer.footer .nav-footer-center, footer.footer .nav-footer-right { font-size: 14px; }
footer.footer a { color: #e6eef8; }

/* ===== コンタクトページ: 他のページと同じ、紺の地に直接(白いカードなし) =====
   contact.qmd のクラス名(amcc-contact-* と #cf)はそのまま使い、色だけ上書きする */
main .amcc-contact-tabs {
  background: transparent;
  color: #f1f5fa;
  padding: 0;
  line-height: 1.8;
}
main .amcc-contact-tabs a { color: #a9cdf5; }
main .amcc-contact-tabs a:hover { color: var(--amc-gold); }

/* タブ */
main .amcc-contact-tabs .amcc-contact-tab-list { border-bottom: 2px solid var(--amc-gold); }
main .amcc-contact-tabs .amcc-contact-tab-list > div {
  background: transparent;
  color: #c3d3e6;
  border-color: rgba(255, 255, 255, .28);
}
main .amcc-contact-tabs .amcc-contact-tab-list > div:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
main .amcc-contact-tabs .amcc-contact-tab-list > div.amcc-contact-active {
  background: rgba(224, 187, 112, .16);
  color: var(--amc-gold);
  border-color: var(--amc-gold);
  border-bottom-color: transparent;
}

/* パネル */
main .amcc-contact-tabs .amcc-contact-panels {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #f1f5fa;
}
main .amcc-contact-tabs .amcc-contact-notice-lead { color: #fff; }
main .amcc-contact-tabs .amcc-contact-notice-list > li { color: #f1f5fa; }
main .amcc-contact-tabs .amcc-contact-notice-list > li > i,
main .amcc-contact-tabs .amcc-contact-tip-wrap > i,
main .amcc-contact-tabs .amcc-contact-copy-btn { color: var(--amc-gold); }

/* フォーム (#cf) */
main #cf {
  --cf-accent: #e0bb70;
  --cf-accent-hover: #f0d08a;
  background: transparent;
  color: #f1f5fa;
}
main #cf .cf-label,
main #cf label,
main #cf .cf-consent { color: #f1f5fa; }
main #cf .cf-hint,
main #cf .cf-count,
main #cf .cf-status { color: #c3d3e6; }
main #cf .cf-err { color: #ffb4b4; }
main #cf input:not([type="checkbox"]),
main #cf textarea {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .38) !important;
}
main #cf input::placeholder,
main #cf textarea::placeholder { color: rgba(255, 255, 255, .45); }
main #cf input:focus,
main #cf textarea:focus {
  border-color: var(--amc-gold);
  box-shadow: 0 0 0 3px rgba(224, 187, 112, .28);
  outline: 0;
}
main #cf .cf-badge.cf-req { background: var(--amc-gold); color: #0a2240; }
main #cf .cf-badge.cf-opt { background: rgba(255, 255, 255, .18); color: #f1f5fa; }
main #cf button {
  background: var(--amc-gold);
  color: #0a2240;
}
main #cf button:hover:not(:disabled) { background: #f0d08a; }
main #cf button:disabled { background: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); }
main .amcc-contact-tabs .amcc-contact-copy-btn {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .38);
}
main .amcc-contact-tabs .amcc-contact-copy-btn:hover { background: rgba(255, 255, 255, .20); }

/* ===== 404ページ =====
   page404 の qmd 自身が h1.title に「縁取り(-webkit-text-stroke:4px 紺)」を付けるため、
   紺の地では文字が読めなくなる。縁取りを消し、文字を大きくする(amcc-site.js が body に amcc-404 を付ける) */
main h1.title { -webkit-text-stroke: 0 !important; }
body.amcc-404 main h1.title {
  font-size: clamp(56px, 10vw, 104px);
  line-height: 1.1;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}
body.amcc-404 main.content,
body.amcc-404 main.content p,
body.amcc-404 main.content li { font-size: 22px; }
body.amcc-404 main.content li { margin-bottom: .5em; }