/* ==============================================
   ガチャタンク デザインシステム
   対象: gacha-tank.com ユーザーページ
   ============================================== */

/* -----------------------------------------------
   1. デザイントークン
----------------------------------------------- */
:root {
  --gt-bg:          #0d1a05;
  --gt-bg-card:     #121f07;
  --gt-bg-section:  #0f1f06;
  --gt-green:       #1e3209;
  --gt-military:    #4A5320;
  --gt-gold:        #E9AB2D;
  --gt-gold-light:  #f5c842;
  --gt-gold-dim:    rgba(233,171,45,0.18);
  --gt-text:        #f0f5e0;
  --gt-text-muted:  #8fa870;
  --gt-border:      rgba(233,171,45,0.35);
  --gt-shadow-gold: 0 0 18px rgba(233,171,45,0.45);
  --gt-shadow-card: 0 4px 24px rgba(0,0,0,0.7);
  --gt-radius-card: 12px;
  /* 管理画面のbg-colorを上書き（後から定義するため有効） */
  --bg-color:       #0d1a05;
  --bg-sub1-color:  #0f1f06;
  --font-color:     #f0f5e0;
  --anchor-color:   #f0f5e0;
}

/* -----------------------------------------------
   2. グローバル背景・文字
----------------------------------------------- */
html,
body,
#app,
#wrapper,
.wrapper,
main,
.main,
#main,
.page,
.page-wrapper,
.content,
.main-content {
  background-color: var(--gt-bg) !important;
  color: var(--gt-text) !important;
}

/* 管理画面からの白背景強制を上書き */
.container,
.bg-root,
.bg-sub1,
section.section-md {
  background-color: transparent !important;
  background: transparent !important;
}

/* ローディング */
#loading {
  background: var(--gt-bg) !important;
}

/* -----------------------------------------------
   3. ヘッダー
----------------------------------------------- */
#header {
  background: linear-gradient(180deg, #1e3208 0%, #152305 100%) !important;
  border-bottom: 2px solid var(--gt-gold) !important;
  box-shadow: 0 2px 16px rgba(233,171,45,0.25) !important;
  backdrop-filter: blur(8px);
}

/* ヘッダー内レイアウト：アイコンを右端へ */
#header .header-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none !important;
  padding: 0 20px !important;
  margin: 0 !important;
  /* 高ズーム時にヘッダー内が折り返して固定80pxをはみ出し、
     直下のパンくずに被さるのを防ぐ */
  flex-wrap: nowrap !important;
}

#header .member {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* ヘッダーナビアイコンを大きく・間隔広め */
#header .icon-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

#header .icon-nav li a i {
  font-size: 1.5rem !important;
}

#header .icon-nav li a .fs-xs,
#header .icon-nav li a span.fs-xs {
  font-size: 0.72rem !important;
  margin-top: 2px;
}

/* ヘッダー下部のゴールドライン（border-bottomと二重になるため非表示） */
.gt-header-line {
  display: none;
}

@keyframes gt-header-line-glow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; filter: drop-shadow(0 0 4px var(--gt-gold)); }
}

/* ロゴ：ヘッダー内で縦中央に配置 */
#header .header-inner {
  align-items: center !important;
}
#header .logo {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
#header .logo a {
  display: flex;
  align-items: center;
}
#header .logo a img {
  height: 72px !important;
  max-height: 72px !important;
  width: auto !important;
  margin: 0 !important;
  transform: translateY(-5px);
  filter: drop-shadow(0 0 8px rgba(233,171,45,0.5));
  transition: filter 0.3s ease;
}
#header .logo a:hover img {
  filter: drop-shadow(0 0 14px rgba(233,171,45,0.8));
}

/* ヘッダーナビアイコン */
#header .icon-nav a,
#header .icon-nav span {
  color: var(--gt-text) !important;
}

#header .icon-nav li a {
  position: relative;
  transition: color 0.2s ease !important;
}

#header .icon-nav li a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--gt-gold);
  transition: width 0.25s ease;
}

#header .icon-nav li a:hover {
  color: var(--gt-gold) !important;
}

#header .icon-nav li a:hover::after {
  width: 70%;
}

/* ポイント表示 */
#header .icon-nav > li > div {
  background: linear-gradient(135deg, #1e3209, #2d4a15) !important;
  border: 1px solid var(--gt-border) !important;
  color: var(--gt-gold) !important;
  box-shadow: 0 0 8px rgba(233,171,45,0.15);
}

/* カートバッジ */
.num-in-cart {
  background: var(--gt-gold) !important;
  color: #0d1a05 !important;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(233,171,45,0.6) !important;
}

/* ドロップダウンメニュー */
.dropdown-menu {
  background: #0d1f05 !important;
  border: 1px solid var(--gt-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important;
}
.dropdown-menu .dropdown-item {
  color: var(--gt-text) !important;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}
.dropdown-menu .dropdown-item:hover {
  background: var(--gt-gold-dim) !important;
  color: var(--gt-gold) !important;
}

/* -----------------------------------------------
   3.55 ヘッダー カテゴリーナビ（TOP ＋ カテゴリー）
   header-search 枠内に配置。カテゴリーは config('app.category_nav') 由来。
----------------------------------------------- */
#header .header-search {
  display: flex;
  align-items: center;
  overflow: visible;
}
.gt-header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.gt-header-nav::-webkit-scrollbar { display: none; }
/* グループ見出し(h3)は横並びナビでは不要 */
.gt-header-nav h3 { display: none !important; }
/* ヘッダーナビは主要カテゴリー（抽選＝オリパ）のみ表示。
   アイテムカテゴリー群（2つ目以降の .parent）は雑多になるため非表示 */
.gt-header-nav > ul:not(:first-of-type) { display: none !important; }
.gt-header-nav .parent {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.gt-header-nav .parent > li {
  position: relative;
  list-style: none;
  margin: 0;
}
.gt-header-nav a,
.gt-header-nav-top {
  color: var(--gt-text) !important;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  text-decoration: none !important;
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.gt-header-nav a::after,
.gt-header-nav-top::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 2px;
  background: var(--gt-gold);
  transition: width 0.25s ease;
}
.gt-header-nav a:hover,
.gt-header-nav-top:hover { color: var(--gt-gold) !important; }
.gt-header-nav a:hover::after,
.gt-header-nav-top:hover::after { width: 100%; }
/* 子カテゴリ（sub-nav）はホバーでドロップダウン表示 */
.gt-header-nav .sub-nav-toggle { display: none; }
.gt-header-nav .sub-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  background: #0d1f05;
  border: 1px solid var(--gt-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}
.gt-header-nav .parent > li:hover > .sub-nav { display: block; }
.gt-header-nav .sub-nav li { list-style: none; }
.gt-header-nav .sub-nav a {
  display: block;
  padding: 8px 16px;
  font-size: 0.88rem;
  white-space: nowrap;
}
.gt-header-nav .sub-nav a::after { display: none; }
.gt-header-nav .sub-nav a:hover { background: var(--gt-gold-dim); }

/* 狭い画面ではヘッダーが窮屈になるためナビは非表示（カテゴリーはページ内から辿れる） */
@media (max-width: 992px) {
  .gt-header-nav { display: none; }
}

/* -----------------------------------------------
   3.6 ヘッダー高さと本文オフセットの整合（パンくず被りの根治）
   layout.css は @media(max-width:992px) で header を height:auto にするため、
   大きいロゴ(72px)でヘッダーが約103pxに伸び、本文オフセット(80px)を超えて
   直下のパンくずにめり込む（＝拡大率を上げると 992px 以下に入って再現）。
   769〜992px の帯でヘッダー高さと wrapper のオフセットを一致させて解消する。
   ※≤768px は別途SPのコンパクト設定に任せる／>992px は header:80px で問題なし。
----------------------------------------------- */
@media (min-width: 769px) and (max-width: 992px) {
  header,
  #header {
    height: 100px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #wrapper.wrapper:not(.true) {
    margin-top: 100px !important;
  }
  #header .logo a img {
    height: 84px !important;
    max-height: 84px !important;
    transform: none !important;
  }
}

/* PC(993px以上)：斜め枠なしのシンプルなヘッダー＋大きめロゴ。
   ヘッダー高さと本文オフセットを同値にして被り防止。 */
@media (min-width: 993px) {
  header,
  #header {
    height: 112px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #wrapper.wrapper:not(.true) {
    margin-top: 112px !important;
  }
  #header .logo a img {
    height: 96px !important;
    max-height: 96px !important;
    transform: none !important;
  }
}

/* -----------------------------------------------
   3.7 パンくずリスト
----------------------------------------------- */
.breadcrumbs {
  position: relative;
  z-index: 1;
  /* 親(.wrapper)との margin 相殺を避けるため gap は padding で確保 */
  padding-top: 14px;
  background: transparent !important;
}
.breadcrumbs ul li {
  color: var(--gt-text-muted) !important;
}
.breadcrumbs ul li a {
  color: var(--gt-gold) !important;
}
.breadcrumbs ul li:after {
  color: var(--gt-text-muted) !important;
}

/* -----------------------------------------------
   3.5 KV ヒーローセクション
----------------------------------------------- */
/* メインビジュアル全体（ヒーロー＋バナー）を1画面に収める。
   ヘッダーは position:fixed 80px、.wrapper は margin-top:80px なので
   1画面ぶんの高さ ＝ 100dvh − 80px。
   ヒーローが flex:1 で余白を埋め、バナーは自然な高さで下に置かれる（JS測定に依存しない） */
/* メインビジュアル：ヒーロー帯＋その下にバナー（自然配置）。
   1画面に押し込まないので、比率・ズームが変わっても破綻しない */
.gt-mainvisual {
  display: block;
}

.gt-kv-hero {
  position: relative;
  /* メインビジュアル（ヒーロー＋直下のバナー）でほぼ1画面を埋め、
     続く「Pick Up」が下端で少し覗く＝スクロールを誘う。
     高さ = 画面高 − 固定ヘッダー(80px) − バナー＆覗き分(約190px)。
     clamp で上下限を設けて、比率・ズームが変わっても破綻しないようにする */
  min-height: clamp(360px, calc(100dvh - 80px - 190px), 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 上下に余白を確保（特に下＝ボタンとバナーの間を空ける） */
  padding: clamp(16px, 3vh, 40px) 16px clamp(22px, 4vh, 52px);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, #1e3208 0%, #0d1a05 55%, #1a2c07 100%);
  /* バナースライダーと一体で「メインビジュアル」に見せるため下の境界線は無し */
}

/* メインビジュアルの初回描画チラつき対策：
   レイアウトが確定するまで隠しておき、確定後にフェードインで表示する */
.gt-kv-hero,
.front-slider { transition: opacity 0.4s ease; }
.gt-mv-hold .gt-kv-hero,
.gt-mv-hold .front-slider { opacity: 0 !important; }

.gt-kv-bg-deco {
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 50% 40%, rgba(233,171,45,0.1) 0%, transparent 60%);
  animation: gt-kvPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gt-kvPulse {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%       { transform: scale(1.15); opacity: 1; }
}

.gt-kv-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 16px;
  /* ヒーロー枠いっぱいに広がる中央寄せの箱にする（マスコットの高さ%の基準になる） */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 18px);
}
/* マスコット＆文字の背後だけをそっと暗くして、背景カードから浮き立たせる */
.gt-kv-inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94%);
  height: 116%;
  background: radial-gradient(ellipse at center,
              rgba(13,26,5,0.72) 0%,
              rgba(13,26,5,0.45) 45%,
              transparent 72%);
  pointer-events: none;
}

.gt-kv-main-img {
  /* 高さは「ヒーロー枠の割合(%)」で決める。枠が短ければ自動で縮み、ボタンが切れない。
     幅は画面/枠に対して 500px か 82% の小さい方でキャップ（スマホでもはみ出さない） */
  width: auto;
  height: auto;
  /* 画面基準(vh)で大きさを決める＝どのズーム・比率でも予測可能で巨大化しない。
     幅は 500px か 84% の小さい方でキャップ（スマホでもはみ出さない） */
  max-width: min(500px, 84%);
  max-height: min(34vh, 340px);
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 6px 32px rgba(233,171,45,0.65));
  animation: gt-kvFloat 4s ease-in-out infinite;
  display: block;
}
@keyframes gt-kvFloat {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%       { transform: translateY(-12px) scale(1.03); }
}

.gt-kv-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gt-text);
  line-height: 1.6;
  margin: 0;   /* 間隔は .gt-kv-inner の gap に任せる */
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.gt-kv-highlight {
  color: var(--gt-gold);
  font-weight: 900;
  font-size: 1.15rem;
  text-shadow: 0 0 12px rgba(233,171,45,0.6);
}

.gt-kv-cta {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 30px;
  border-radius: 50px;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--gt-gold), #c8921f);
  color: #0d1a05 !important;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(233,171,45,0.5);
  transition: all 0.25s ease;
}
.gt-kv-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 32px rgba(233,171,45,0.85);
  color: #0d1a05 !important;
}

/* カードマーキー */
.gt-kv-marquee {
  position: absolute;
  top: 50%;
  left: -5%;
  right: -5%;
  height: 195px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50%) rotate(-3deg);
  opacity: 0.32;
}
.gt-kv-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding: 10px 0;
  animation: gt-cardMarquee 60s linear infinite;
}
.gt-kv-card-img {
  width: 130px;
  height: 173px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid rgba(233,171,45,0.4);
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.65);
}
@keyframes gt-cardMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (min-width: 1024px) {
  .gt-kv-marquee    { height: 210px; opacity: 0.26; }
  .gt-kv-card-img   { width: 148px; height: 197px; border-radius: 12px; }
}

/* スクロールインジケーター */
.gt-kv-scroll-btn {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,26,5,0.8);
  border: 1.5px solid var(--gt-gold);
  border-radius: 50px;
  padding: 7px 20px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
  transition: background 0.2s;
  animation: gt-scrollBounce 2.2s ease-in-out infinite;
}
.gt-kv-scroll-btn:hover { background: rgba(233,171,45,0.15); }
.gt-kv-scroll-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--gt-gold);
  letter-spacing: 0.12em;
  line-height: 1;
}
.gt-kv-scroll-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.gt-kv-scroll-chevrons i {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gt-gold);
  border-bottom: 2px solid var(--gt-gold);
  transform: rotate(45deg);
  font-style: normal;
}
.gt-kv-scroll-chevrons i:first-child { opacity: 0.35; }
.gt-kv-scroll-chevrons i:last-child  { opacity: 1; margin-top: -5px; }
@keyframes gt-scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* 浮遊する星 */
.gt-kv-star {
  position: absolute;
  color: var(--gt-gold);
  opacity: 0;
  pointer-events: none;
  animation: gt-starFloat 6s ease-in-out infinite;
}
.gt-kv-star.s1 { font-size: 22px; top: 12%; left: 6%;  animation-delay: 0s; }
.gt-kv-star.s2 { font-size: 14px; top: 25%; right: 8%; animation-delay: 1.8s; }
.gt-kv-star.s3 { font-size: 18px; bottom: 18%; left: 12%; animation-delay: 3.2s; }
.gt-kv-star.s4 { font-size: 12px; bottom: 25%; right: 14%; animation-delay: 4.5s; }
@keyframes gt-starFloat {
  0%   { transform: translateY(0)    rotate(0deg);  opacity: 0; }
  20%  { opacity: 0.55; }
  50%  { transform: translateY(-12px) rotate(25deg); opacity: 0.7; }
  80%  { opacity: 0.35; }
  100% { transform: translateY(0)    rotate(0deg);  opacity: 0; }
}

@media (min-width: 768px) {
  .gt-kv-tagline  { font-size: 1.05rem; }
  .gt-kv-highlight { font-size: 1.2rem; }
  .gt-kv-cta { font-size: 0.95rem; padding: 11px 34px; }
}

/* -----------------------------------------------
   4. スライダー（KVバナー / メインビジュアル）
----------------------------------------------- */
.front-slider.section-md,
.front-slider {
  /* KVヒーローから続くグリーンの一体背景（バナーをメインビジュアルに含める） */
  background: linear-gradient(180deg, #1a2c07 0%, #0d1a05 100%) !important;
  padding: 16px 0 24px !important;
  margin-top: 0 !important;
  position: relative !important;
}

/* スライダーを囲むゴールドフレーム */
.gt-kv-frame {
  position: relative;
}

/* 上端のゴールドラインは非表示（ヒーローと一体化させるため） */
.front-slider::before { display: none; }

/* 下端のゴールドラインでメインビジュアルと本文を区切る */
.front-slider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gt-gold) 30%, var(--gt-gold-light) 50%, var(--gt-gold) 70%, transparent 100%);
  box-shadow: 0 0 14px rgba(233,171,45,0.7);
  animation: gt-header-line-glow 3s ease-in-out infinite;
}

.front-slider::before { top: 0; }
.front-slider::after  { bottom: 0; }

/* 左右のビネット（暗く落とす） */
.swiper::before,
.swiper::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 80px;
  z-index: 4;
  pointer-events: none;
}

.swiper::before {
  left: 0;
  background: linear-gradient(90deg, rgba(13,26,5,0.7), transparent);
}

.swiper::after {
  right: 0;
  background: linear-gradient(270deg, rgba(13,26,5,0.7), transparent);
}

/* スライド画像 */
.swiper-slide figure {
  margin: 0;
  line-height: 0;
}

.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.swiper-slide-active img {
  transform: scale(1.015);
}

/* ナビ矢印 */
.swiper-button-next,
.swiper-button-prev {
  color: var(--gt-gold) !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(13,26,5,0.7);
  border: 1px solid var(--gt-border);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  filter: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--gt-gold-dim) !important;
  box-shadow: 0 0 12px rgba(233,171,45,0.4);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 0.85rem !important;
  font-weight: 700;
}

/* ページネーション */
.swiper-pagination-bullet {
  background: rgba(240,245,224,0.4) !important;
  opacity: 1;
  width: 6px;
  height: 6px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--gt-gold) !important;
  width: 20px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 6px rgba(233,171,45,0.6);
}

/* スライダー下部のセクションとの区切り */
.front-slider + .main-content,
.front-slider + * {
  border-top: 1px solid rgba(233,171,45,0.1);
}

/* -----------------------------------------------
   5. セクション共通
----------------------------------------------- */
.section-md {
  background: transparent !important;
}

.container {
  background: transparent !important;
}

/* セクションタイトル */
.title-wrap {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}

.title-wrap::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gt-gold), transparent);
  margin: 10px auto 0;
}

/* "New" "Pick Up" ラベル */
.title-wrap .c-m.bold {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-border);
  padding: 2px 12px;
  border-radius: 2px;
  margin-bottom: 6px;
}

/* セクション h2 */
.title-wrap h2.title2,
.title-wrap .title2 {
  color: var(--gt-text) !important;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.title-wrap h2.title2 span,
.title-wrap .title2 span {
  color: var(--gt-text) !important;
}

/* -----------------------------------------------
   6. ガチャカード (.item-card.oripa-c)
----------------------------------------------- */
.collection {
  background: transparent !important;
}

.item-card.oripa-c {
  background: var(--gt-bg-card) !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: var(--gt-radius-card) !important;
  box-shadow: var(--gt-shadow-card) !important;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  position: relative;
}

.item-card.oripa-c:hover {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow: var(--gt-shadow-gold), var(--gt-shadow-card) !important;
  border-color: var(--gt-gold) !important;
}

/* カード画像エリア */
.item-card.oripa-c .item-card-img {
  overflow: hidden;
  position: relative;
}

/* シマーエフェクト */
.item-card.oripa-c .item-card-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}

.item-card.oripa-c:hover .item-card-img::after {
  animation: gt-shimmer 0.6s ease forwards;
}

@keyframes gt-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* カードヘッダー（バッジエリア） */
.item-card.oripa-c .card-header {
  background: transparent !important;
  padding: 8px 10px 4px !important;
  border-bottom: none !important;
}

.item-card.oripa-c .card-header .badge.lottery-type {
  background: var(--gt-military) !important;
  color: var(--gt-gold) !important;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

.item-card.oripa-c .card-header .badge.taxonomy {
  background: var(--gt-gold-dim) !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-border) !important;
  font-size: 0.6rem;
}

/* SOLD OUT マスク */
.soldout-mask {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

.soldout-mask span {
  color: var(--gt-gold) !important;
  border-color: var(--gt-gold) !important;
  background: rgba(13,26,5,0.85) !important;
  text-shadow: 0 0 10px var(--gt-gold);
}

/* カードフッター */
.item-card.oripa-c .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--gt-border) !important;
  padding: 8px 10px !important;
}

/* 価格 */
.oripa-card-price {
  color: var(--gt-gold) !important;
  font-weight: 700 !important;
  font-size: 1rem;
  text-shadow: 0 0 8px rgba(233,171,45,0.5);
}

.oripa-card-price .fa-coins {
  color: var(--gt-gold) !important;
}

/* 残数 */
.oripa-card-stock {
  color: var(--gt-text-muted) !important;
  font-size: 0.75rem;
  margin-top: 4px;
}

/* 残数ゲージ */
.gauge-wrap {
  padding: 6px 10px !important;
}

.gauge-wrapper {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}

/* 残数ゲージ：グラデーションをやめ、%に応じた単色で分かりやすく。
   ※クラスはサーバー側(OripaCTheme)が付与：無=40%以上 / .warning=20〜39% / .danger=20%未満 */
.gauge-bar {
  background: linear-gradient(180deg, #5ad86a 0%, #34ab3f 100%) !important;   /* 鮮やかな緑：残数に余裕あり（40%以上） */
  height: 100%;
  width: var(--percent, 100%);
  border-radius: 4px;
}

.gauge-wrapper.warning .gauge-bar {
  background: linear-gradient(180deg, #ffdc4d 0%, #f5b400 100%) !important;        /* 黄：中くらい以下（20〜39%） */
}

.gauge-wrapper.danger .gauge-bar {
  background: linear-gradient(180deg, #ff5b5b 0%, #e02020 100%) !important;   /* 鮮やかな赤：残りわずか（20%未満・点滅なし） */
}

@keyframes gt-low-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* -----------------------------------------------
   7. 購入ボタン
----------------------------------------------- */
.btn,
.btn-md,
.btn-sm {
  transition: all 0.2s ease !important;
}

/* メインボタン（全てのガチャを見る等） */
a.btn.btn-md,
button.btn.btn-md {
  background: var(--gt-military) !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-gold) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  overflow: hidden;
}

a.btn.btn-md:hover,
button.btn.btn-md:hover {
  background: var(--gt-gold) !important;
  color: #0d1a05 !important;
  box-shadow: var(--gt-shadow-gold) !important;
}

/* ガチャ購入ボタン（1回・10連等） */
.purchase_lottery_button_wrap .btn,
.footer-sticky .btn,
ul.purchase_lottery_button_wrap li a {
  background: linear-gradient(135deg, var(--gt-military), #2d4a15) !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-border) !important;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  /* 「0Pで10回引く」等の折り返しを防いで1行に収める */
  white-space: nowrap;
  letter-spacing: 0;
  font-size: clamp(0.78rem, 3.4vw, 1rem);
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.purchase_lottery_button_wrap .btn:hover,
ul.purchase_lottery_button_wrap li a:hover {
  background: linear-gradient(135deg, var(--gt-gold), #c8921f) !important;
  color: #0d1a05 !important;
  border-color: var(--gt-gold) !important;
  box-shadow: var(--gt-shadow-gold) !important;
}

/* 試し引きボタン */
.btn-outline,
.btn.btn-outline-main {
  background: transparent !important;
  border: 1px solid var(--gt-border) !important;
  color: var(--gt-text-muted) !important;
}

/* フッター固定ボタンエリア */
.footer-sticky {
  background: rgba(10, 20, 3, 0.95) !important;
  border-top: 1px solid var(--gt-border) !important;
  backdrop-filter: blur(6px);
}

/* -----------------------------------------------
   8. フッター
----------------------------------------------- */
footer {
  background: linear-gradient(180deg, #182a07 0%, #0d1a05 100%) !important;
  border-top: 2px solid var(--gt-gold) !important;
  color: var(--gt-text-muted) !important;
}

footer a {
  color: var(--gt-text-muted) !important;
}

footer a:hover {
  color: var(--gt-gold) !important;
}

/* フッター全体を縦積み・中央寄せにし、順序を ロゴ→メニュー→SNS に */
footer .container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
footer .container > section.mt-md {        /* ロゴ */
  order: 1;
  margin-top: 0 !important;
  margin-bottom: 10px;
}
footer .container > nav.footer-nav {       /* メニュー */
  order: 2;
  width: 100%;
}
footer .container > .gt-footer-sns {       /* SNS */
  order: 3;
}

/* ロゴを大きく */
footer .logo img {
  height: 96px !important;
  width: auto;
}

/* メニューを横1列・中央寄せ（bootstrapのカラム幅制限を解除） */
footer .footer-nav .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0;
}
footer .footer-nav .col-md-4 {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0;
}
footer .menu-store_menu-container ul,
footer .menu-user_menu-container ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  padding: 0;
  margin: 0;
}

footer .menu-store_menu-container ul li,
footer .menu-user_menu-container ul li {
  list-style: none;
}

footer .menu-store_menu-container ul li a,
footer .menu-user_menu-container ul li a {
  font-size: 0.82rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

#copyright {
  background: #050c02 !important;
  color: var(--gt-text-muted) !important;
  font-size: 0.75rem;
  border-top: 1px solid rgba(233,171,45,0.15) !important;
}

/* フッターロゴ */
footer .logo a img {
  filter: brightness(0.9) drop-shadow(0 0 6px rgba(233,171,45,0.3));
}

/* フッター SNS ボタン */
.gt-footer-sns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 22px 0 6px;
}
.gt-sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--gt-bg-card);
  border: 1px solid var(--gt-border);
  border-radius: 50%;
  color: var(--gt-text-muted) !important;
  transition: all 0.2s ease;
}
.gt-sns-link:hover {
  border-color: var(--gt-gold);
  color: var(--gt-gold) !important;
  background: rgba(233,171,45,0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(233,171,45,0.3);
}
.gt-sns-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* -----------------------------------------------
   9. TO TOP ボタン
----------------------------------------------- */
/* トップに戻るボタン：スクロールで出現 */
#to_top {
  position: fixed !important;
  bottom: 24px !important;
  right: 18px !important;
  z-index: 990 !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#to_top.gt-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#to_top a {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #b87a10, var(--gt-gold)) !important;
  color: #1a1400 !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(233,171,45,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#to_top a i {
  color: #1a1400 !important;
  font-size: 18px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* 「TOP」テキストと改行は非表示（本家はアイコンのみ） */
#to_top a .text,
#to_top a br {
  display: none !important;
}

#to_top a:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* -----------------------------------------------
   10. バッジ・ラベル全般
----------------------------------------------- */
.badge {
  border-radius: 3px !important;
}

/* レアリティバッジ（SSR等） */
.badge[class*="ssr"],
.badge[class*="SSR"] {
  animation: gt-ssr-glow 2.2s ease-in-out infinite;
}

@keyframes gt-ssr-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,180,0,0.4); }
  50%       { box-shadow: 0 0 14px rgba(255,180,0,0.9), 0 0 28px rgba(255,130,0,0.4); }
}

/* -----------------------------------------------
   11. フォーム・入力欄
----------------------------------------------- */
input, select, textarea {
  background: var(--gt-green) !important;
  color: var(--gt-text) !important;
  border-color: var(--gt-border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--gt-text-muted) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gt-gold) !important;
  box-shadow: 0 0 0 2px rgba(233,171,45,0.2) !important;
  outline: none !important;
}

/* -----------------------------------------------
   12. スクロールバー
----------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--gt-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--gt-military);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gt-gold);
}

/* -----------------------------------------------
   13. モバイル調整
----------------------------------------------- */
@media (max-width: 768px) {
  .item-card.oripa-c {
    border-radius: 8px !important;
  }

  .title-wrap h2.title2 {
    font-size: 1.2rem;
  }

  /* ===== ヘッダー SP：無駄な高さを徹底的に詰める ===== */
  #header {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .header-inner {
    padding: 5px 12px !important;   /* 上下を詰めてヘッダーをコンパクトに */
    min-height: 0 !important;
    height: auto !important;
  }
  #header .logo a img {
    height: 64px !important;
    max-height: 64px !important;
    transform: translateY(0);
  }
  #header .icon-nav {
    gap: 12px;
    align-items: center;
  }
  #header .icon-nav li {
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .icon-nav li a {
    padding: 0 !important;
    line-height: 1.15 !important;
    display: block;
  }
  #header .member {
    padding: 0 !important;
    margin-left: auto !important;
  }

  /* KVヒーロー：SPも1画面基準（コンパクトヘッダー約66px＋バナー/覗き約160px）*/
  .gt-kv-hero {
    min-height: clamp(300px, calc(100dvh - 66px - 160px), 520px);
  }
  /* SPのマスコットも画面基準で控えめに */
  .gt-kv-main-img {
    max-height: min(30vh, 260px);
  }
  #header .icon-nav {
    gap: 14px;
  }
  #header .icon-nav li a i {
    font-size: 1.2rem !important;
  }
  #header .icon-nav li a .fs-xs,
  #header .icon-nav li a span.fs-xs {
    font-size: 0.58rem !important;
    white-space: nowrap;      /* 「会員登録」等の折り返しを防ぐ */
  }
  #header .member {
    padding-right: 0 !important;
  }
  /* ポイント表示（ログイン時）を小さく */
  #header .icon-nav > li > div {
    padding: 4px 8px !important;
  }

  /* ===== フッター SP ===== */
  footer .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* メニューカラムを全幅にして折り返し可能に */
  footer .footer-nav .col-md-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  footer .menu-store_menu-container ul,
  footer .menu-user_menu-container ul {
    gap: 8px 14px;
    padding: 0 6px;
  }
  footer .menu-store_menu-container ul li a,
  footer .menu-user_menu-container ul li a {
    font-size: 0.74rem;
  }
  footer .logo img {
    height: 72px !important;
  }
  .gt-footer-sns {
    margin: 18px 0 4px;
  }
}

/* -----------------------------------------------
   15. ガチャ結果画面（turn-the-lottery）
----------------------------------------------- */
main.turn-the-lottery {
  background: var(--gt-bg) !important;
  color: var(--gt-text) !important;
  min-height: 100vh;
  padding: 48px 16px 64px;
}
main.turn-the-lottery .container {
  background: transparent !important;
}

/* 見出し */
main.turn-the-lottery .title2,
main.turn-the-lottery .title2 span,
main.turn-the-lottery .title3,
main.turn-the-lottery h4 {
  color: var(--gt-text) !important;
}
main.turn-the-lottery .title2 span {
  border-bottom: 2px solid var(--gt-gold);
  padding-bottom: 6px;
}
main.turn-the-lottery .title3 {
  color: var(--gt-gold) !important;
  letter-spacing: 0.08em;
}

/* 結果カードリスト */
.nft-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 0 auto 32px;
  list-style: none;
}
.nft-card-list > li {
  list-style: none;
}

/* 結果カード本体 */
.nft-card {
  background: var(--gt-bg-card) !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--gt-shadow-card) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nft-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gt-shadow-gold), var(--gt-shadow-card) !important;
}
.nft-card-front {
  background: transparent !important;
  border: none !important;
}

/* カード画像 */
.nft-card .item-card-img {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  line-height: 0;
}
.nft-card .item-card-img img {
  width: 100%;
  display: block;
}

/* カード下部テキスト */
.nft-card .item-card-content {
  padding: 12px 14px 16px;
  text-align: center;
}
.nft-card .item-title {
  color: var(--gt-text) !important;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.5;
}
.nft-card .badge.bg-normal {
  display: inline-block;
  background: var(--gt-military) !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: 4px !important;
  font-size: 0.68rem;
  padding: 3px 10px;
  letter-spacing: 0.04em;
}

/* 結果画面ボタン群 */
#lottery-footer {
  max-width: 480px;
  margin: 0 auto;
}
main.turn-the-lottery .btn,
main.turn-the-lottery .btn-lg {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--gt-military), #2d4a15) !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-gold) !important;
  transition: all 0.2s ease !important;
}
main.turn-the-lottery .btn:hover,
main.turn-the-lottery .btn-lg:hover {
  background: linear-gradient(135deg, var(--gt-gold), #c8921f) !important;
  color: #0d1a05 !important;
  box-shadow: var(--gt-shadow-gold) !important;
}
/* 「詳細画面へ戻る」＝控えめなアウトライン */
main.turn-the-lottery .btn.btn-secondary {
  background: transparent !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-border) !important;
}
main.turn-the-lottery .btn.btn-secondary:hover {
  background: var(--gt-gold-dim) !important;
  color: var(--gt-gold) !important;
  box-shadow: none !important;
}
/* ポイント変換ボタン（sub2）＝軍事グリーン系 */
main.turn-the-lottery .btn.btn-sub2 {
  background: var(--gt-green) !important;
  color: var(--gt-text) !important;
  border: 1px solid var(--gt-border) !important;
}

/* スキップ・スタート・音量ボタン（演出中） */
main.turn-the-lottery #skip,
main.turn-the-lottery #start {
  background: rgba(13,26,5,0.85) !important;
  color: var(--gt-gold) !important;
  border: 1px solid var(--gt-gold) !important;
  border-radius: 30px !important;
}

/* -----------------------------------------------
   14.5 カード画像の高さを抑える（1画面に多く並べて購入率UP）
   base は aspect-ratio:1/1（正方形）、oripa テーマは padding-bottom:100%。
   両方を打ち消して横長比率にし高さを圧縮。
   画像は object-fit:contain なので絵は切れず、小さく収まるだけ。
----------------------------------------------- */
.item-list .item-card-img,
.collection .item-card-img,
.item-card.oripa-c .item-card-img {
  aspect-ratio: 1500 / 839 !important;   /* 実バナー画像(1500×839)に合わせる＝白帯なし・高さ約56% */
  padding-bottom: 0 !important;
  height: auto !important;
}

/* -----------------------------------------------
   15.5 抽選詳細ページ（.item-detail-wrap）
   白背景をやめてダークテーマに馴染ませ、文字を見やすくする
----------------------------------------------- */
.item-detail-wrap {
  background: var(--gt-bg-card) !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gt-shadow-card) !important;
  color: var(--gt-text) !important;
}
/* 内部の見出し・本文テキストを明色に（明示的な色指定が無い箇所を救済） */
.item-detail-wrap,
.item-detail-wrap p,
.item-detail-wrap li,
.item-detail-wrap dt,
.item-detail-wrap dd,
.item-detail-wrap h1,
.item-detail-wrap h2,
.item-detail-wrap h3,
.item-detail-wrap h4,
.item-detail-wrap .item-title,
.item-detail-wrap .item-name {
  color: var(--gt-text) !important;
}

/* -----------------------------------------------
   16. アニメーション制御（prefers-reduced-motion）
----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .item-card.oripa-c,
  .item-card.oripa-c:hover .item-card-img::after,
  .gauge-wrapper.danger .gauge-bar,
  .badge[class*="ssr"] {
    animation: none !important;
    transition: none !important;
  }
}