@charset "UTF-8";
/* 抽選チケットの見た目（大阪3サイト共通：ガチャるん・トレジャーポケット・ガチャぽち）
   ★ガチャタンクは gacha-tank.css に独自の見た目がある。こちらは大阪用。
   ★色・地・枠は各サイトの指定（管理画面の独自CSS・--main-color）にまかせ、ここでは決めない。
     チケットの箱は隣のポイントの箱と同じ .d-flex の箱なので、サイトの指定がそのまま効く。
   2026-10 抽選チケット本番反映時に追加 */

/* ---------- ヘッダー右上：所持枚数＋次の1枚までのバー＋「あと○円」 ---------- */
/* 箱の高さをポイントの箱に揃えるため、li → a → 箱 を縦いっぱいに伸ばす */
#header .icon-nav .nav-ticket {
  display: flex;
}
#header .icon-nav .nav-ticket > a {
  display: flex;
  flex: 1;
  padding: 0;
  text-decoration: none;
}
#header .icon-nav .nav-ticket .gt-ticket-box {
  flex: 1;
}
/* ポイントの箱とくっつかないよう、少し離す */
#header .icon-nav .nav-ticket {
  margin-left: 10px;
}
/* 地・余白・数字の色は、ポイントの箱の直書き（背景 #eee・余白 5px 10px・数字はメイン色）と同じにしておく。
   箱を独自CSSで作り直しているサイト（!important 指定）では、そちらが勝つ */
#header .icon-nav .gt-ticket-box {
  height: 100%;
  padding: 5px 10px;
  border-radius: 10px;
  background: #eee;
}
#header .icon-nav .gt-ticket-box > div {
  line-height: 1.2;
  text-align: center;
}
#header .icon-nav .gt-ticket-num {
  font-weight: bold;
  color: var(--main-color);
}
#header .icon-nav .gt-ticket-bar {
  display: block;
  width: 48px;
  height: 4px;
  margin: 2px auto 0;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.35);
  overflow: hidden;
}
#header .icon-nav .gt-ticket-bar > span {
  display: block;
  height: 100%;
  background: var(--main-color);
}
#header .icon-nav .gt-ticket-next {
  display: block;
  margin-top: 1px;
  font-size: 10px !important;
  font-weight: normal !important;
  line-height: 1.2;
  white-space: nowrap;
}

/* スマホ：ログイン中はポイント・チケット・カート・メンバーの4つが並ぶので詰める。
   ★チケットの箱があるときだけ効かせる（未ログインの見た目は変えない） */
@media only screen and (max-width: 567px) {
  #header .icon-nav:has(.nav-ticket) > li {
    padding: 5px 2px;
  }
  #header .icon-nav:has(.nav-ticket) > li:not(.nav-ticket) > a {
    padding: 6px 3px;
    white-space: nowrap;
  }
  #header .icon-nav:has(.nav-ticket) > li .d-flex {
    padding: 4px 6px !important;
  }
  #header .icon-nav:has(.nav-ticket) .gt-ticket-bar {
    width: 40px;
  }
  #header .icon-nav .nav-ticket {
    margin-left: 6px;
  }
  /* 箱が4つになるとロゴにかぶる（独自CSSでロゴの高さを76pxに固定しているサイトがある）。
     ロゴの枠を少し狭め、画像はその枠に収める */
  #header:has(.nav-ticket) .header-inner .logo {
    width: 28%;
  }
  #header:has(.nav-ticket) .header-inner .member {
    width: 72%;
  }
  #header:has(.nav-ticket) .header-inner .logo img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
  }
}
/* 360px 以下（小さいスマホ）：さらに詰める */
@media only screen and (max-width: 360px) {
  #header:has(.nav-ticket) .header-inner .logo {
    width: 22%;
  }
  #header:has(.nav-ticket) .header-inner .member {
    width: 78%;
  }
  #header .icon-nav:has(.nav-ticket) > li {
    padding: 4px 1px;
  }
  #header .icon-nav:has(.nav-ticket) > li:not(.nav-ticket) > a {
    padding: 6px 2px;
  }
  #header .icon-nav:has(.nav-ticket) > li .d-flex {
    padding: 3px 4px !important;
  }
  #header .icon-nav:has(.nav-ticket) .fs-xs,
  #header .icon-nav:has(.nav-ticket) .gt-ticket-next {
    font-size: 9px !important;
  }
  #header .icon-nav:has(.nav-ticket) .gt-ticket-bar {
    width: 34px;
  }
  #header .icon-nav .nav-ticket {
    margin-left: 4px;
  }
}

/* ---------- オリパ一覧のカード：値段の「＋🎫1枚」 ----------
   ★値段の箱の置き方はサイトごとに違う（独自CSSで作り直しているサイトがある）ので、位置は触らない。
     横に並べると隣の「残数」にかぶるサイトがあるので、並べ方が flex のサイトでは値段の下の行に回す */
/* ★値段の箱の高さを固定しているサイトがある（ガチャるん：32px）。2行目がはみ出して下の残数にかぶるので、
     チケットがあるときだけ中身に合わせて伸ばす（下の残数はその分下がる） */
.oripa-c .oripa-card-price.has-ticket {
  flex-wrap: wrap;
  height: auto !important;
  min-height: 32px;
}
/* 抽選ページでは値段とバーが高さ固定（50px）の枠（.gauge-wrap）に一緒に入っているので、枠も伸ばす */
.gauge-wrap:has(> .oripa-card-price.has-ticket) {
  height: auto !important;
}
.oripa-card-price .price-ticket {
  order: 2;
  flex-basis: 100%;
  margin-left: 4px;
  font-size: 0.75em;
  white-space: nowrap;
}

/* ---------- 抽選ページ：必要枚数・所持枚数・解放済みか ---------- */
#main .lottery-ticket-notice {
  margin-top: 0.8em;
  padding: 0.6em 0.9em;
  border: 1px solid var(--main-color);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.6;
}
#main .lottery-ticket-notice .lottery-ticket-rule {
  font-weight: 700;
}
#main .lottery-ticket-notice .lottery-ticket-unlocked {
  color: #2e9d3a;
  font-weight: 700;
}
#main .lottery-ticket-notice .lottery-ticket-locked {
  opacity: 0.7;
}

/* ---------- チケットが足りないときの「引く」ボタン（押せない）と、ポイント購入への案内 ----------
   抽選ページ下の帯（.purchase_lottery_button_wrap）は1行・はみ出しを隠す作りなので、ここだけ折り返しを許す */
ul.purchase_lottery_button_wrap > li.lottery-ticket-short-wrap {
  flex: 0 1 340px !important;
  width: 100% !important;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
#main .btn.lottery-ticket-short,
.btn.lottery-ticket-short,
ul.purchase_lottery_button_wrap li .btn.lottery-ticket-short {
  background: #bbb !important;
  border-color: #aaa !important;
  color: #555 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
  white-space: normal !important;
  line-height: 1.3;
}
.lottery-ticket-short-link,
ul.purchase_lottery_button_wrap li a.lottery-ticket-short-link {
  display: block;
  margin-top: 6px;
  padding: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.4;
  text-align: center;
  white-space: normal !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: underline;
}

/* ---------- ヘッダーの高さに収める（2026-10-10 追記） ----------
   ★ガチャるん・ガチャぽちはヘッダーが 80px 固定（layout.css）で、中身に使えるのは 60px。
   ・「カート」「メンバー」のリンクは上下 10px の余白で 67px あり、隣の箱もその高さに伸びて下端に付いていた（反映前から）
   ・ガチャるんはロゴを 76px にしているため、並びの基準がロゴになり、右の箱が下へずれていた
   → 並びをヘッダーの上下中央に置き、ログイン中（チケットの箱があるとき）はリンクと箱を詰めて 60px 以内に収める */
#header .header-inner {
  align-content: center;
}
#header .icon-nav:has(.nav-ticket) > li:not(.nav-ticket) > a {
  padding-top: 4px;
  padding-bottom: 4px;
}
#header .icon-nav .gt-ticket-box {
  padding-top: 3px;
  padding-bottom: 3px;
}
#header .icon-nav .gt-ticket-box > div {
  line-height: 1.05;
}
#header .icon-nav .gt-ticket-ico {
  font-size: 0.9em;
}
#header .icon-nav .gt-ticket-next {
  margin-top: 2px;
  line-height: 1;
}

/* ---------- マイページ・抽選ページ：所持ポイントと所持チケットの札 ----------
   2段に折り返したとき上下がくっつくので、チケットの札の上を空ける */
.point-wrap .point.lottery-ticket {
  margin-top: 6px;
}