/* =========================================================================
   GDOCK ナビゲーション（ヘッダー／フッター）— 2026-08-21

   ★このファイルだけは .post_content の外に手を入れる。
     触るのは「メニュー項目に付けた目印クラス」だけに限定し、
     SWELL のヘッダー構造そのものには手を出さない。

   前提：外観 → メニュー → 表示オプション →「CSSクラス」にチェックを入れ、
         各項目に下記クラスを設定しておくこと。

     マイページ    → gd-ec
     カートを見る  → gd-ec gd-cart

   ヘッダーは黒地を維持。カートだけオレンジのボタンにして、
   「読み物への導線（4カテゴリ）」と「購買への導線（EC）」を視覚的に分ける。
   ========================================================================= */

/* ===== 前提：SWELL のグローバルナビの作り =====
     .c-gnav               { display:flex; height:100% }
     .c-gnav > .menu-item  { height:100% }
     .c-gnav > .menu-item>a{ height:100%; display:flex; flex-direction:column;
                             justify-content:center; padding:0 12px }
   → 項目はヘッダーの高さいっぱいに伸びる。
     ボタンにする項目だけ、この「高さ100%」を解除しないと
     オレンジがヘッダー全体を貫通する。
   ============================================================ */

/* ===== EC グループ：4カテゴリとの間に区切りを入れる =====
   ※ :first-of-type はタグ種別しか見ないのでクラスには使えない。
     「EC でない項目の直後にある最初の EC 項目」を狙う。 */
.c-gnav > li:not(.gd-ec) + li.gd-ec{
  position:relative;
  margin-left:14px;
}
.c-gnav > li:not(.gd-ec) + li.gd-ec::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:18px;
  background:currentColor;
  opacity:.26;
}

/* マイページ：少し引いた見せ方（購買導線だが主役ではない） */
.c-gnav > li.gd-ec > a .ttl{
  font-size:13.5px;
  opacity:.86;
}
.c-gnav > li.gd-ec > a:hover .ttl{
  opacity:1;
}

/* ===== カートを見る：オレンジのボタン ===== */
/* li の height:100% を解除して、中身の高さで自立させる */
.c-gnav > li.gd-cart{
  height:auto;
  align-self:center;
  margin-left:16px;
}
.c-gnav > li.gd-cart > a{
  height:auto;
  flex-direction:row;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:var(--r-chip,2px);
  background:var(--grad,linear-gradient(135deg,#ffab2e,#ff6a13 45%,#ff4d1f));
  color:#fff !important;
  box-shadow:0 6px 18px rgba(255,90,31,.28);
  transition:.25s;
}
.c-gnav > li.gd-cart > a:hover{
  filter:brightness(1.06);
  box-shadow:0 8px 22px rgba(255,90,31,.38);
}
.c-gnav > li.gd-cart > a .ttl{
  font-weight:700;
  font-size:13.5px;
  opacity:1;
}
/* カートアイコン（インラインSVG・外部読み込みなし） */
.c-gnav > li.gd-cart > a::before{
  content:"";
  flex:0 0 auto;
  width:16px;
  height:16px;
  background-color:#fff;
  -webkit-mask:var(--gd-cart-icon) center/contain no-repeat;
  mask:var(--gd-cart-icon) center/contain no-repeat;
}
/* SWELL のホバー下線（a:after）を殺す */
.c-gnav > li.gd-cart > a::after{
  content:none;
  display:none;
}

:root{
  --gd-cart-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* 画面が狭いときはボタンを詰める */
@media(max-width:1100px){
  .c-gnav > li.gd-cart{margin-left:10px}
  .c-gnav > li.gd-cart > a{padding:10px 14px;gap:6px}
  .c-gnav > li.gd-cart > a .ttl{font-size:13px}
}

/* ===== フッターメニュー ===== */
/* EC グループはフッターでも少し引いた見せ方に揃える */
.l-footer .gd-ec > a{
  opacity:.88;
}
.l-footer .gd-ec > a:hover{
  opacity:1;
}

/* ===== 固定フッター（SP）=====
   スマホではカートとマイページを画面下に常駐させる。
   SWELL の「固定フッター（SP）」メニューに割り当てること。
   カートだけアクセント色にして押しやすくする。 */
.c-fixBtnWrap .gd-cart a,
.p-fixBottomMenu .gd-cart a{
  color:var(--accent,#ff6a13);
}

/* ===== フッター：商標帰属表記 =====
   swell_after_copyright フックから出力している一文。
   コピーライトより一段引いた見せ方にする。 */
.l-footer .gd-trademark{
  margin-top:8px;
  font-size:11.5px;
  line-height:1.7;
  opacity:.55;
}