/* =========================================================================
   相互送客｜AIガバナンス大学（自社運営）  2026-08-24
   「外観 → カスタマイズ → 追加CSS」に貼り付ける。
   原則: Host owns the chrome, Guest brings only its logo
         → 面はキュリオ側（ダーク／黒）のまま。大学はゴールドの細線1本だけ借りる。
         → 赤（#A21E23）とゴールド（#C8A24B）は隣接させない。
   ========================================================================= */

:root{
  --ag-gold:#C8A24B;      /* サブブランドの旗（線・アクセントのみ） */
  --ag-gold-l:#E4C877;    /* ダーク面での文字色 */
}

/* ---------- ② トップ OUR SERVICES 内 グループサービスカード ---------- */
/* #services は background:#1A1A1A のダーク面。白カードは浮くのでダークカードで実装 */
.cu-group{
  margin-top: 50px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.14);
}
@media screen and (max-width: 768px){
  .cu-group{ margin-top: 34px; padding-top: 26px; }
}

.cu-group__label{
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--ag-gold-l);
}

.cu-scard{
  display: block;
  padding: 26px 28px 24px;
  box-sizing: border-box;
  background: #141414;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 3px solid var(--ag-gold);   /* ＝サブブランドの旗 */
  border-radius: 10px;                    /* サービスタイルと同じ角丸 */
  color: #ffffff;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.cu-scard:hover{
  background: #181818;
  border-color: rgba(200,162,75,.45);
  border-top-color: var(--ag-gold);
  transform: translateY(-2px);
}
@media screen and (max-width: 768px){
  .cu-scard{ padding: 22px 20px 20px; }
}

.cu-scard__badge{
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--ag-gold-l);
  background: rgba(200,162,75,.12);
  border: 1px solid rgba(200,162,75,.36);
  border-radius: 100px;
}

.cu-scard__ttl{
  margin: 0 0 5px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}
@media screen and (max-width: 768px){
  .cu-scard__ttl{ font-size: 18px; }
}

.cu-scard__sub{
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--ag-gold-l);
}

.cu-scard__txt{
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  color: #B9C0C9;
}
@media screen and (max-width: 768px){
  .cu-scard__txt{ font-size: 14px; line-height: 1.8; }
}

/* CTA: ゴールドは「塗り」ではなく「線」で。自社4サービスより前に出さない */
.cu-scard__cta{
  display: inline-block;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 100px;
  transition: border-color .25s ease, color .25s ease;
}
.cu-scard__cta:after{
  content: "";
  width: .42em; height: .42em;
  margin-left: .8em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1em);
  display: inline-block;
  vertical-align: middle;
}
.cu-scard:hover .cu-scard__cta{
  color: var(--ag-gold-l);
  border-color: var(--ag-gold-l);
}
@media screen and (max-width: 768px){
  .cu-scard__cta{ padding: 12px 20px; font-size: 13px; }
}

/* ---------- ① フッター グループサービス ---------- */
footer .inner .innerContents .footGroup{
  margin-top: 45px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.14);
}
@media screen and (max-width: 768px){
  footer .inner .innerContents .footGroup{ margin-top: 30px; padding-top: 24px; }
}

footer .inner .innerContents .footGroup .footGroupLabel{
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--ag-gold-l);
}
footer .inner .innerContents .footGroup .footGroupLabel span{
  margin-left: .9em;
  font-size: 11px;
  letter-spacing: .06em;
  color: #8A8A8A;
}

footer .inner .innerContents .footGroup .footGroupList > li{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 768px){
  footer .inner .innerContents .footGroup .footGroupList > li{ font-size: 14px; }
}

footer .inner .innerContents .footGroup .footGroupList > li > a{
  display: inline-block;
  color: #ffffff;
  transition: color .25s ease;
}
footer .inner .innerContents .footGroup .footGroupList > li > a .sub{
  font-size: 12px;
  color: #8A8A8A;
  transition: color .25s ease;
}
footer .inner .innerContents .footGroup .footGroupList > li > a:after{
  content: "↗";
  margin-left: .5em;
  font-size: .82em;
  color: var(--ag-gold-l);
}
footer .inner .innerContents .footGroup .footGroupList > li > a:hover{
  color: var(--ag-gold-l);
}
footer .inner .innerContents .footGroup .footGroupList > li > a:hover .sub{
  color: var(--ag-gold-l);
}

/* ---------- メガメニュー Service一覧の「AIガバナンス大学」行 ---------- */
/* 四角は自社4色（紺/赤/オリーブ/グレー）に対してゴールド＝サブブランドの旗 */
header .headerMenu .menuInner .menuContents .nav .navContents > a .navListWrap .navList > li.-aigov > a:before,
header .headerMenu .menuInner .menuContents .nav .navContents .navContentsInner .navListWrap .navList > li.-aigov > a:before{
  background: var(--ag-gold);
}
/* 外部サイトへ出ることを示す矢印 */
header .headerMenu .menuInner .menuContents .nav .navContents > a .navListWrap .navList > li.-aigov > a .cu-navext,
header .headerMenu .menuInner .menuContents .nav .navContents .navContentsInner .navListWrap .navList > li.-aigov > a .cu-navext{
  margin-left: .5em;
  font-size: .85em;
  color: var(--ag-gold-l);
}
header .headerMenu .menuInner .menuContents .nav .navContents > a .navListWrap .navList > li.-aigov > a:hover,
header .headerMenu .menuInner .menuContents .nav .navContents .navContentsInner .navListWrap .navList > li.-aigov > a:hover{
  color: var(--ag-gold-l);
}