@charset "UTF-8";
#cta-6a7bc0cb90bbdf7eaa4c3f4e {
  @charset "utf-8";
  /* ==========================================================================
     CO-WELL セクション内ナビ ─ 共通パーツ専用のスタイル
     2026-08-20 作成（票220で採用した「帯」型／票221で共通パーツに分離）

     ■ どこに貼るか
     このCSSは**ナビのパーツを置く場所のCSS欄**に貼る。
     ページ本文用の cowell-service-scoped.css とは別物で、混ぜないこと。
     両方を同じページに入れても衝突しない（クラス名が別のため）。

     ■ 絶対ルール
     すべて .cwd-nav の中に限定してある。html / body / 素タグへの指定は書かない。
     fO は JSパーツの <style> を自動スコープしないため、CSSはこの欄に置くこと。

     ■ 何をするナビか
     ファーストビュー（ヒーロー）と本文の**境目に入る幅いっぱいの帯**。
     ・帯なので「ここが区切り」「ここはナビ」と形で分かる
     ・共通ヘッダーの真下から離れるので、グローバルナビへ向かうカーソルが当たらない
     （どちらも 2026-08-20 の先方FBへの対応）

     ■ 色
     ナビ自身は色を持たない。スクリプトが付けるクラス
     （cwd-nav-navy / cwd-nav-teal / cwd-nav-orange / cwd-nav-grad）で、
     そのページの色の**薄い版**に切り替わる。
     ========================================================================== */
  /* スクリプトが付ける、ページごとの色（薄い版）。
     グラデのページだけ左右で色が変わる薄いグラデにして、他と見分けが付くようにしてある。 */
  /* 横が入りきらないときだけ横スクロールさせる。
     overflow-x だけを指定すると縦もスクロール扱いになり、現在地の下線が
     1pxでもはみ出すと縦スクロールバーが出るため、縦は明示的に止める（票171）。 */
  /* セクショントップだけ中央揃え（2026-08-31・票236）。
     トップはFVが中央揃えなので、帯だけ左寄せだと軸がずれて見える。
     下層4ページはFVが左寄せなので、これまでどおり左寄せのまま。
     このクラスはナビ自身のスクリプトが「どのページにも当たらないURL＝トップ」で付ける。 */
  /* 左端＝セクショントップ（/service/system-development）への導線。
     2026-09-07・票289＝先方FB「どのページにいてもTOPに戻る導線がない」への対応。

     ⚠ 票290（オーナー指示）で作りを変えた。票289では小さい灰色の見出しに「←」を足したが、
     文字が小さい・色が薄い・他の項目と作りが違うぶん、かえって分かりにくかった。
     **他の4項目とまったく同じタブにする**（同じ文字サイズ・濃さ・余白・ホバー）。

     セクショントップにいるときはナビのスクリプトが href を外す。
     href が無い＝現在地として、他の項目と同じ白いタブ＋そのページの色の下線になる。 */
  /* 現在地＝白いタブ＋そのページの色の下線 */
  /* 下線は帯の内側にぴったり収める（はみ出すと縦スクロールバーが出る） */
  /* 狭い画面は横スクロールにせず2段に折り返す。
     項目が4つなので、スクロールバーを出すより全部見せたほうが分かりやすい。 */
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav {
  --cwdnav-navy:#0B3A5D;
  --cwdnav-ink:#22303F;
  --cwdnav-sub:#5B6B7A;
  --cwdnav-line:#DCE7EE;
  /* 既定＝薄い水色。スクリプトがページごとに差し替える */
  --cwdnav-accent-bg:#29ABC5;
  --cwdnav-soft:#E9F6FA;
  /* 上のパーツ（ファーストビュー）との間にできる fO 既定の余白を詰める量。
     パーツとパーツの間は 52.3px（2026-08-12 実ページ実測）。
     ぴったり付けたいので -52px。すき間を残したいときは数字を小さくする。
     ラッパーで上書きできる： <nav class="cwd-nav" style="--cwdnav-top-adjust:-40px"> */
  --cwdnav-top-adjust:-52px;
  display: block;
  margin-top: var(--cwdnav-top-adjust);
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.9;
  background: var(--cwdnav-soft);
  border-top: 1px solid var(--cwdnav-line);
  border-bottom: 1px solid var(--cwdnav-line);
  /* 本文カラムより広く敷く。横スクロールバーが出る環境では
     この2行を width:auto / margin-left:0 に戻す */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav * {
  box-sizing: border-box;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav.cwd-nav-navy {
  --cwdnav-accent-bg:#0B3A5D;
  --cwdnav-soft:#EDF3F8;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav.cwd-nav-teal {
  --cwdnav-accent-bg:#29ABC5;
  --cwdnav-soft:#E9F6FA;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav.cwd-nav-orange {
  --cwdnav-accent-bg:#EE7B22;
  --cwdnav-soft:#FDF3EA;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav.cwd-nav-grad {
  --cwdnav-accent-bg:linear-gradient(90deg,#29ABC5,#0B3A5D);
  --cwdnav-soft:linear-gradient(90deg,#E9F6FA,#EDF3F8);
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-in {
  display: flex;
  align-items: stretch;
  padding: 0 24px;
  max-width: 1160px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav.cwd-nav-center .cwd-nav-in {
  justify-content: center;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-title {
  display: flex;
  align-items: center;
  padding: 19px 22px;
  font-size: 13.5px;
  font-weight: bold;
  color: var(--cwdnav-ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  line-height: 1.4;
  transition: 0.2s;
  flex-shrink: 0;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav a[href].cwd-nav-title:hover {
  color: var(--cwdnav-navy);
  background: #fff;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-title:not([href]) {
  color: var(--cwdnav-navy);
  background: #fff;
  cursor: default;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-title:not([href])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--cwdnav-accent-bg);
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list {
  display: flex;
  align-items: stretch;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list a {
  display: flex;
  align-items: center;
  padding: 19px 22px;
  font-size: 13.5px;
  font-weight: bold;
  color: var(--cwdnav-ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  line-height: 1.4;
  transition: 0.2s;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list a:hover {
  color: var(--cwdnav-navy);
  background: #fff;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list a.cwd-nav-current {
  color: var(--cwdnav-navy);
  background: #fff;
  cursor: default;
}
#cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list a.cwd-nav-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--cwdnav-accent-bg);
}
@media (max-width: 820px) {
  #cta-6a7bc0cb90bbdf7eaa4c3f4e {
    /* ⚠ 2026-09-04 票254：3つ折り返し＋4つ目だけ2段目に取り残される形になっていて、
       4つで1組の切り替えに見えず、押せる場所だとも気づけなかった。
       2×2に揃え、現在地でないものにも薄い下地を敷いて「押せる札」に見せる。 */
    /* 左端も他の項目と同じ札にして、4つの札の上に全幅で1つ置く（2026-09-07・票290）。
       ここは票254まで隠していた場所。セクショントップへの導線を兼ねるので出す。 */
  }
  #cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  #cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list a {
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    padding: 13px 8px;
    font-size: 13px;
  }
  #cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-list a.cwd-nav-current {
    background: #fff;
  }
  #cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-in {
    overflow: visible;
    padding: 10px 16px;
    flex-wrap: wrap;
  }
  #cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-title {
    width: 100%;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    padding: 13px 8px;
    font-size: 13px;
    margin-bottom: 6px;
  }
  #cta-6a7bc0cb90bbdf7eaa4c3f4e .cwd-nav .cwd-nav-title:not([href]) {
    background: #fff;
  }
}