/*
Theme Name:Sunist
Theme URI:https://sunistgacha.com/
Description:WordPressテーマ「Astra」の子テーマです。
Template:astra
Author:Global Step Inc.
Author URI:https://globalstep.jp/
Version:4.6.11
*/

/* メインページのトップにマージンを追加 */
main {
    margin-top:40px;
}
.page-id-3 .site-content,
.page-id-493 .site-content,
.page-id-1565 .site-content,
.page-id-1880 .site-content{
    padding-left: 8px !important;
    padding-right: 4px !important;
}

@media(min-width:720px){
	.gacha-item{
	margin-bottom:30px;
	}
}
.custom-logo {
    overflow: hidden; /* 画像の余分な部分を隠す */
    width: 100px; /* 必要に応じてサイズを調整 */
    height: 100px; /* 必要に応じてサイズを調整 */
    object-fit: cover; /* 画像を中央に収める */
}


.ast-container{
   padding-bottom:0px !important;
   padding-top:0px !important;
}



.site-branding.ast-site-identity {
	padding-top:0px;
}



/* =====================
   sunist header — SUNIST 2025
===================== */

@keyframes sunistTopBar {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes sunistDrop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ヘッダーバー本体 */
.sunist-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #070b1c;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  animation: sunistDrop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 上部アクセントライン（3px グラデーション） */
.sunist-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1565C0 0%, #00BCD4 40%, #1565C0 100%);
  background-size: 200% 100%;
  animation: sunistTopBar 5s ease infinite;
  pointer-events: none;
}

/* 下部セパレーター（subtle） */
.sunist-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(0, 188, 212, 0.12);
  pointer-events: none;
}

/* 内部レイアウト */
.sunist-header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 80px;
  padding: 0 24px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ─── ロゴ ─── */
.sunist-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding-right: 20px;
  margin-right: 4px;
  transition: opacity 0.18s;
}
.sunist-header__logo:hover { opacity: 0.75; }

/* 画像ロゴ（横長トリミングで文字部分を拡大表示） */
.sunist-header__logo-img {
  height: 72px;
  width: 220px;
  display: block;
  object-fit: cover;
  object-position: center 50%;
  filter: drop-shadow(0 0 10px rgba(0,188,212,0.4));
}

/* テキストロゴ（フォールバック） */
.sunist-header__logo-text {
  font-weight: 900;
  font-size: 26px;
  color: #fff !important;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 0 20px rgba(0,188,212,0.45);
}

/* 右側アクションエリア */
.sunist-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── ボタン共通 ─── */
.sunist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

/* ログインボタン（アウトライン） */
.sunist-btn--ghost {
  border: 1px solid rgba(0,188,212,0.55);
  color: #00BCD4 !important;
  background: transparent;
}
.sunist-btn--ghost:hover {
  background: rgba(0,188,212,0.1);
  border-color: #00BCD4;
  color: #fff !important;
}

/* 新規登録ボタン（フィル） */
.sunist-btn--solid {
  border: 1px solid transparent;
  color: #fff !important;
  background: #1565C0;
}
.sunist-btn--solid:hover {
  background: #1976D2;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(0,188,212,0.4);
}

/* ─── ポイントエリア ─── */
.sunist-points {
  position: relative;
  display: flex;
  align-items: center;
}

/* ポイントボタン */
.sunist-pointbtn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid rgba(0,188,212,0.35);
  background: rgba(21,101,192,0.18);
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  padding: 0 10px;
  gap: 6px;
  transition: background 0.18s, border-color 0.18s;
}
.sunist-pointbtn:hover {
  background: rgba(21,101,192,0.35);
  border-color: rgba(0,188,212,0.7);
}

.sunist-pointbtn__coin {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.sunist-pointbtn__text {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.sunist-pointbtn__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,0.15);
  font-size: 16px;
  font-weight: 900;
  color: #00BCD4;
  line-height: 1;
}

/* ポイントドロップダウン */
.sunist-pointmenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 156px;
  background: #0b1428;
  border: 1px solid rgba(0,188,212,0.28);
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  display: none;
  padding: 5px;
  z-index: 9999;
}
.sunist-pointmenu.is-open { display: block; }
.sunist-pointmenu__item {
  display: block;
  padding: 9px 14px;
  border-radius: 2px;
  text-decoration: none;
  color: #c5e5ff !important;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}
.sunist-pointmenu__item:hover {
  background: rgba(21,101,192,0.3);
  color: #fff !important;
}

/* ─── ハンバーガー ─── */
.sunist-hamburger {
  width: 44px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05) !important;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.sunist-hamburger:hover {
  background: rgba(0,188,212,0.12) !important;
  border-color: rgba(0,188,212,0.4);
}
.sunist-hamburger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: rgba(255,255,255,0.8) !important;
  border-radius: 1px;
}
header .sunist-hamburger span,
.sunist-header .sunist-hamburger span {
  background-color: rgba(255,255,255,0.8) !important;
  background: rgba(255,255,255,0.8) !important;
}

/* Astra の button スタイルを確実に上書き */
button.sunist-pointbtn,
button.sunist-pointbtn:hover,
button.sunist-pointbtn:focus,
button.sunist-pointbtn:active,
button.sunist-pointbtn:focus-visible {
  color: #fff !important;
  background: rgba(21,101,192,0.18) !important;
  border: 1px solid rgba(0,188,212,0.35) !important;
  outline: none !important;
  box-shadow: none !important;
}
button.sunist-pointbtn:hover,
button.sunist-pointbtn:focus-visible {
  background: rgba(21,101,192,0.35) !important;
  border-color: rgba(0,188,212,0.7) !important;
}
button.sunist-pointbtn:active {
  background: rgba(21,101,192,0.5) !important;
}

button.sunist-hamburger,
button.sunist-hamburger:hover,
button.sunist-hamburger:focus,
button.sunist-hamburger:active,
button.sunist-hamburger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* レスポンシブ */
@media (min-width: 1024px) {
  .sunist-header__inner { padding: 0 48px; }
  .sunist-header__logo-img { height: 76px; width: 240px; }
  .sunist-header__logo-text { font-size: 32px; }
}
@media (max-width: 768px) {
  .sunist-header__inner { padding: 0 16px; height: 68px; }
  .sunist-header__logo-img { height: 60px; width: 180px; }
  .sunist-header__logo-text { font-size: 24px; }
  .sunist-header__logo { padding-right: 14px; }
}
@media (max-width: 550px) {
  .sunist-header__inner { padding: 0 12px; height: 60px; }
  .sunist-header__logo-img { height: 52px; width: 155px; }
  .sunist-header__logo-text { font-size: 20px; }
  .sunist-btn { font-size: 12px; padding: 0 12px; height: 32px; }
  .sunist-pointbtn { height: 32px; }
  .sunist-hamburger { height: 32px; width: 38px; }
}

/* =====================
   Drawer
===================== */
.sunist-drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.sunist-drawer.is-open {
  display: block;
}

.sunist-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 20, 0.75);
  backdrop-filter: blur(3px);
  animation: sunistFadeIn 0.25s ease;
}

.sunist-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 88vw);
  height: 100%;
  background: #080c1a;
  padding: 0;
  overflow-y: auto;
  box-shadow: -12px 0 48px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  animation: sunistSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sunist-drawer__panel::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #1565C0 0%, #00BCD4 50%, #1565C0 100%);
  flex-shrink: 0;
}

/* 閉じるボタン — 四角・右上 */
.sunist-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  padding:25px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.18s;
  box-shadow: none;
}
.sunist-drawer__close:hover {
  border-color: rgba(0,188,212,0.5);
  color: #00BCD4;
  background: rgba(0,188,212,0.08);
}

/* 上部プロフィールエリア */
.sunist-drawer__top {
  margin-top: 0;
  padding: 44px 24px 20px;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: visible;
  box-shadow: none;
  position: relative;
}

/* ランクボックス — 縦積みセンタリング */
.sunist-rankbox {
  background: transparent;
  border-radius: 0;
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sunist-rankbox__rank {
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.18em;
  line-height: 1;
  animation: sunistRankGlow 3.5s ease-in-out infinite;
}
.sunist-rankbox__meta {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1.6;
  font-family: monospace;
}

/* ポイント表示 — グラスモーフィズム枠 */
.sunist-drawer__pt {
  background: rgba(0,188,212,0.06);
  border: 1px solid rgba(0,188,212,0.22);
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  box-shadow: 0 0 16px rgba(0,188,212,0.05), inset 0 0 20px rgba(0,188,212,0.03);
}
.sunist-drawer__ptlabel {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  opacity: 1;
}
.sunist-drawer__ptvalue {
  font-size: 20px;
  font-weight: 900;
  color: var(--rank-text);
  text-shadow: 0 0 12px currentColor;
}

/* メニュー */
.sunist-drawer__menu {
  margin-top: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

/* メニューアイテム — フラットロウ */
.sunist-drawer__item {
  background: linear-gradient(90deg, rgba(0,188,212,0.07) 0%, transparent 100%);
  background-size: 200% 100%;
  background-position: -100% 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
  padding: 17px 24px;
  text-decoration: none;
  color: rgba(255,255,255,0.6) !important;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: background-position 0.4s ease, color 0.2s, padding-left 0.2s, text-shadow 0.2s;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

/* 左ネオンライン */
.sunist-drawer__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rank-text);
  box-shadow: 0 0 8px 1px currentColor, 0 0 18px currentColor;
  opacity: 0;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.sunist-drawer__item::after {
  display: none;
}

.sunist-drawer__item:hover {
  background-position: 0% 0;
  color: #fff !important;
  transform: none;
  padding-left: 28px;
  text-shadow: 0 0 8px rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.04);
}
.sunist-drawer__item:hover::before {
  opacity: 1;
}

/* ログアウト */
.sunist-drawer__item--logout {
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: none;
  color: rgba(255,255,255,0.3) !important;
  font-weight: 500;
  font-size: 13px;
  justify-content: center;
  box-shadow: none;
}
.sunist-drawer__item--logout:hover {
  background-position: 0% 0;
  color: rgba(255,255,255,0.55) !important;
  padding-left: 24px;
}
.sunist-drawer__item--logout::before {
  display: none;
}

/* ドロワーを開いた時のアイテムのスタガーアニメーション */
.sunist-drawer.is-open .sunist-drawer__item {
  animation: sunistItemIn 0.38s cubic-bezier(0.22,1,0.36,1) both;
}
.sunist-drawer.is-open .sunist-drawer__item:nth-child(1) { animation-delay: 0.12s; }
.sunist-drawer.is-open .sunist-drawer__item:nth-child(2) { animation-delay: 0.19s; }
.sunist-drawer.is-open .sunist-drawer__item:nth-child(3) { animation-delay: 0.26s; }
.sunist-drawer.is-open .sunist-drawer__item:nth-child(4) { animation-delay: 0.33s; }
.sunist-drawer.is-open .sunist-drawer__item:nth-child(5) { animation-delay: 0.40s; }

/* アニメーション */
@keyframes sunistFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sunistSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes sunistRankGlow {
  0%, 100% { text-shadow: 0 0 8px currentColor; }
  50%       { text-shadow: 0 0 22px currentColor, 0 0 45px currentColor; }
}
@keyframes sunistItemIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}



/* =====================
   Rank Colors
===================== */

/* デフォルト（BEGINNER） & 共通変数 */
.sunist-drawer__panel {
  --rank-text: #29B6F6;
  --rank-bg-start: #1565C0;
  --rank-bg-end: #00BCD4;
}

/* ランクごとの色定義（data-rank属性で切り替え） */

/* BRONZE: 銅色 */
.sunist-drawer__panel[data-rank="bronze"] {
  --rank-text: #a05822;
  --rank-bg-start: #a05822;
  --rank-bg-end: #d48c56;
}

/* SILVER: 銀色（少し青みがかったグレー） */
.sunist-drawer__panel[data-rank="silver"] {
  --rank-text: #546e7a;
  --rank-bg-start: #607d8b;
  --rank-bg-end: #90a4ae;
}

/* GOLD: ゴールド */
.sunist-drawer__panel[data-rank="gold"] {
  --rank-text: #d4af37;
  --rank-bg-start: #d4af37;
  --rank-bg-end: #fdd835;
}

/* PLATINUM: プラチナシルバー×ブルー */
.sunist-drawer__panel[data-rank="platinum"] {
  --rank-text: #90caf9;
  --rank-bg-start: #546e7a;
  --rank-bg-end: #90caf9;
}

/* DIAMOND: 水色・シアン */
.sunist-drawer__panel[data-rank="diamond"] {
  --rank-text: #00bcd4;
  --rank-bg-start: #00bcd4;
  --rank-bg-end: #4dd0e1;
}

/* MASTER: 紫・ピンク系 */
.sunist-drawer__panel[data-rank="master"] {
  --rank-text: #9c27b0;
  --rank-bg-start: #7b1fa2;
  --rank-bg-end: #e91e63;
}

/* LEGEND: 黒×ゴールド（特別仕様） */
.sunist-drawer__panel[data-rank="legend"] {
  --rank-text: #212121;
  --rank-bg-start: #212121;
  --rank-bg-end: #424242;
}


/* =====================
   適用設定
===================== */

/* 1. ランク名の文字色に適用 */
.sunist-rankbox__rank {
  color: var(--rank-text) !important;
  /* LEGENDの時だけ文字に少し金を混ぜる演出（お好みで） */
}
.sunist-drawer__panel[data-rank="legend"] .sunist-rankbox__rank {
  background: linear-gradient(45deg, #000, #444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 2. LEGENDの時だけポイントボックスをゴールド仕様に */
.sunist-drawer__panel[data-rank="legend"] .sunist-drawer__pt {
  border: 1px solid #d4af37 !important;
  background: rgba(212,175,55,0.06) !important;
  box-shadow: 0 0 16px rgba(212,175,55,0.12) !important;
}
.sunist-drawer__panel[data-rank="legend"] .sunist-drawer__ptvalue {
  color: #d4af37;
}

/* 3. ホバー時の左ラインと文字色にランク色を適用 */
.sunist-drawer__item:hover {
  color: #fff !important;
}
.sunist-drawer__item:hover::before {
  background: var(--rank-text) !important;
  opacity: 1;
}



/* コイン画像 */
.sunist-pointbtn__coin{
  width:30px;
  height:30px;
  object-fit:contain;
  margin:0 8px 0 10px;
  flex:0 0 auto;
  display:block;
}



.history-modal-content h2{
  font-size: 24px !important;
  border-bottom:2px solid #1565C0 !important;
}
.history-table th{
  background-color: #1565C0 !important;
}
.history-table th, .history-table td{
  padding: 3px !important;
}
.history-table td:first-child {
    color: #1565C0 !important;
}

/*トップページbutton*/
.wp-block-button .wp-block-button__link, .wp-block-search .wp-block-search__button, body .wp-block-file .wp-block-file__button{
   background: black;
   font-size:13px;
   display: inline-block;
   margin: -2px;
   text-align:center;
   padding:10px 10px;
   flex: 1 1 auto; /* フレックスアイテムとしての設定 */
   white-space: nowrap; /* テキストの折り返しを防止 */
}
/* 隙間をなくすための余白調整 */
p.has-text-align-left.gachatext {
    margin: 0; /* 段落の上下の余白を0に設定 */
    padding: 0; /* 段落のパディングを0に設定 */
}

/* 親要素の余白を調整する場合 */
.parent-element-selector {
    margin: 0; /* 親要素の余白を0に設定 */
    padding: 0; /* 親要素のパディングを0に設定 */
}



/* Contact Form 7 の文字色を白にする */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form label{
    color: #000; 
}

.wpcf7-form input[type="submit"],
.wpcf7-form input[type="button"] {
    background: #1565C0;
    color: #fff; /* ボタンの文字色を白に設定 */
    border: none; /* ボーダーを消去 */
    padding: 10px 20px; /* ボタンのパディングを調整 */
    border-radius: 5px; /* ボタンの角を丸くする */
    cursor: pointer; /* ホバー時にカーソルをポインタに変更 */
}

/* ボタンにホバー時のエフェクトを追加 */
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="button"]:hover {
    opacity: 0.9; /* 少し透明度を追加 */
}


/* 入力フィールドのフォーカス時の背景色を変更 */
input:focus, 
textarea:focus, 
select:focus {
    background-color: #eee !important; /* フォーカス時の背景色を変更 */
    color: #000 !important; /* テキストの色を白に設定 */
    border: 1px solid #fff !important; /* フォーカス時の境界線の色を白に設定 */
    outline: none !important; /* フォーカス時のアウトラインを削除 */
}

/* 特定のフォームフィールドに対してフォーカス時の背景色を変更 */
.wpcf7-form-control-wrap input:focus, 
.wpcf7-form-control-wrap textarea:focus, 
.wpcf7-form-control-wrap select:focus {
    background-color: #eee !important; /* フォーカス時の背景色を変更 */
    color: #000 !important; /* テキストの色を白に設定 */
    border: 1px solid #fff !important; /* フォーカス時の境界線の色を白に設定 */
    outline: none !important; /* フォーカス時のアウトラインを削除 */
}

/* その他の設定（必要に応じて調整） */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    background-color: #eee; /* デフォルトの背景色を黒に設定 */
    color: #000; /* テキストの色を白に設定 */
    border: 1px solid #fff; /* 境界線の色を白に設定 */
}

/* Ultimate Memberページの文字色設定（コンテンツ部分のみ） */
body.um-page #content * {
    color: white !important;
}

/* WooCommerceページの文字色設定（コンテンツ部分のみ） */
body.woocommerce-page #content * {
    color: #333 !important;
}
/* thead・ボタン・グラデーション背景の見出しは白文字を維持 */
body.woocommerce-page #content thead th,
body.woocommerce-page #content thead td { color: #fff !important; }
body.woocommerce-page #content .button,
body.woocommerce-page #content button,
body.woocommerce-page #content a.button,
body.woocommerce-page #content input[type="submit"],
body.woocommerce-page #content input[type="button"] { color: #fff !important; }
body.woocommerce-page #content .cart_totals > h2,
body.woocommerce-page #content .cart_totals h2 { color: #fff !important; }

/* Registerページの文字色を#333に設定 */
body.page-id-59.um-page #content * {
    color: #333 !important;
}
body.page-id-59.um-page #content thead th,
body.page-id-59.um-page #content thead td { color: #fff !important; }
body.page-id-59.um-page #content .button,
body.page-id-59.um-page #content button,
body.page-id-59.um-page #content a.button,
body.page-id-59.um-page #content input[type="submit"],
body.page-id-59.um-page #content input[type="button"] { color: #fff !important; }

/* Loginページの文字色を#333に設定 */
body.page-id-60.um-page #content * {
    color: #333 !important;
}
body.page-id-60.um-page #content thead th,
body.page-id-60.um-page #content thead td { color: #fff !important; }
body.page-id-60.um-page #content .button,
body.page-id-60.um-page #content button,
body.page-id-60.um-page #content a.button,
body.page-id-60.um-page #content input[type="submit"],
body.page-id-60.um-page #content input[type="button"] { color: #fff !important; }

/* WooCommerceページのボタンスタイル設定 */
body.woocommerce-page .button, 
body.woocommerce-page .btn, 
body.woocommerce-page input[type="submit"] {
    background: #1565C0 !important;
    color: white !important;
    border: none !important;
}

/* ボタンのホバー効果 */
body.woocommerce-page .button:hover, 
body.woocommerce-page .btn:hover, 
body.woocommerce-page input[type="submit"]:hover {
    opacity: 0.8;
}


/* WooCommerceの表の背景を透明にしつつ文字が読みやすいように調整 */
body.woocommerce-page .woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-page .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-page .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.woocommerce-page .woocommerce-Address-title,
body.woocommerce-page .woocommerce-Address {
 /* 背景を黒の半透明に設定 */
    padding: 10px !important;
    border-radius: 5px !important;
}

/* Ultimate Memberページのボタンスタイル設定 */
body.um-page .um-button, 
body.um-page .um-btn, 
body.um-page input[type="submit"] {
    background: #1565C0 !important;
    color: white !important;
    border: none !important;
}

/* ボタンのホバー効果 */
body.um-page .um-button:hover, 
body.um-page .um-btn:hover, 
body.um-page input[type="submit"]:hover {
    opacity: 0.8;
}

/* Ultimate Memberページのヘッダとフッタの背景色を透明にする */
body.um-page .site-header,
body.um-page .site-footer {
    background-color: transparent !important;
}

/* Ultimate Memberの表の背景を透明にしつつ文字が読みやすいように調整 */
body.um-page .um-field, 
body.um-page .um-field-area, 
body.um-page .um-profile-body {
    padding: 10px !important;
    border-radius: 5px !important;
}

/*支払いの枠線消す必要*/
.woocommerce-message, .woocommerce-info {
 border-top-color: rgba(0, 0, 0, 0.0);
}
/*ロゴ*/
.woocommerce-message::before,.woocommerce-info::before{
 color:#333;
}
.Label{
 color:rab(255,255,255);
}

.woocommerce-cart-form__cart-item.cart_item {
	border-bottom: 4px solid #fff !important; /* 白色の枠線を2pxで追加 */
  padding: 10px; /* コンテンツと枠線の間に余白を追加 */
  box-sizing: border-box; /* パディングを含めてボックスサイズを計算 */
}

/*請求先/お届け先住所*/
.woocommerce .woocommerce-Addresses .woocommerce-Address-title, .woocommerce .woocommerce-Addresses .woocommerce-column__title, .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title, .woocommerce .woocommerce-MyAccount-content .woocommerce-column__title, .woocommerce .woocommerce-customer-details .woocommerce-Address-title, .woocommerce .woocommerce-customer-details .woocommerce-column__title, .woocommerce-account .woocommerce-Addresses .woocommerce-Address-title, .woocommerce-account .woocommerce-Addresses .woocommerce-column__title, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title, .woocommerce-account .woocommerce-customer-details .woocommerce-Address-title, .woocommerce-account .woocommerce-customer-details .woocommerce-column__title{
	background: rgba(0, 0, 0, 0.05);
}
/*支払方法*/
.woocommerce-js table.shop_table thead, .woocommerce-page table.shop_table thead {
    background-color: rgba(50, 50, 93, .11);
}
/*決済方法追加*/
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{
	background-color:rgba(0,0,0,0.22);
	border: 1px solid white;
}
/*お買い物カゴ*/
.woocommerce-cart .cart-collaterals .cart_totals>h2, .woocommerce-cart .cart-collaterals .cross-sells>h2{
	background-color:rgba(0, 0, 0, 0.05);
	font-size:25px !important;
	
}
/*お買い物カゴを更新を薄くなくするdisab*/
body.woocommerce-page .button:disabled,
body.woocommerce-page .button[disabled] {
    opacity: 1 !important; /* 通常の不透明度に設定 */
    filter: none !important;
    background: #333 ; /* 背景色を通常のボタンと同じに設定 */

}


/*/*ログイン住所選択*/
.um-field .select2.select2-container .select2-selection, .um-search-filter .select2.select2-container .select2-selection{
	background-color:#eee;
}
.select2-search__field{
	display:none;
}

.select2-search--dropdown{
 padding:0px;
}
label, legend {
    color: #333;
}
/*支払い注文情報*/
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title, .woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title, .woocommerce.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title, .woocommerce.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title{
	background-color:#eee;
}
/*ログインページ*/
.select2-container .select2-choice, .select2-container-multi .select2-choices, .um .um-form input[type=number], .um .um-form input[type=password], .um .um-form input[type=search], .um .um-form input[type=tel], .um .um-form input[type=text], .um .um-form textarea {
    background-color: #eee;
}
.select2-container .select2-choice:hover, 
.select2-container-multi .select2-choices:hover, 
.um .um-form input[type=number]:hover, 
.um .um-form input[type=password]:hover, 
.um .um-form input[type=search]:hover, 
.um .um-form input[type=tel]:hover, 
.um .um-form input[type=text]:hover, 
.um .um-form textarea:hover {
    background-color: #333; /* ホバー時の背景色を変更 */
    color: #fff; /* テキストの色を白に設定 */
}

.woocommerce form.checkout_coupon .button{
  border-radius: 5px !important;
}


/* プレースホルダーテキストの色変更 */
.page-id-152 .um .um-form input::placeholder,
.page-id-152 .um .um-form textarea::placeholder {
  color: #ccc !important; /* ライトグレーのプレースホルダー */
}
/* ドロップダウンメニューの背景色とテキスト色変更 */
.page-id-152 .um-field .select2-container.select2-container--open .select2-dropdown .select2-results li,
.page-id-152 .um-search-filter .select2-container.select2-container--open .select2-dropdown .select2-results li {
  color: #fff !important; /* 白い文字色 */
}
/* ドロップダウン全体の背景色変更 */
.page-id-152 .select2-dropdown {
  background-color: #000 !important;
}
/* 選択済みオプションの背景色を変わりなく */
.page-id-152 .um-field .select2-dropdown .select2-results li.select2-results__option[aria-selected=true],
.page-id-152 .um-search-filter .select2-dropdown .select2-results li.select2-results__option[aria-selected=true] {
  background-color: #000000 !important;
}
/* ハイライトされたオプションの背景色とテキスト色変更 */
.page-id-152 .um-field .select2-dropdown .select2-results li.select2-results__option.select2-results__option--highlighted,
.page-id-152 .um-search-filter .select2-dropdown .select2-results li.select2-results__option.select2-results__option--highlighted {
  background: #555 !important;
}

/*list-test*/
.ast-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


.gacha-prizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左詰めに変更 */
  width: 60%; /* 横幅を60%に設定 */
  margin: 0 auto; /* 中央寄せ */
}
.gacha-prize-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  width: 100%; 
}
.gacha-prize-image {
  margin-right: 10px;
}

.gacha-prize-image img {
  width: 100px; /* 各画像のサイズを調整 */
  height: auto;
}

/* detail内サムネイル画像のサイズ調整 */
img[alt="ガチャサムネイル"] {
	width:100% !important;
  margin: auto;
  display: block;
}

.gacha-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 95%; /* 横幅を80%に */
  margin: 0 auto; 
}

.gacha-item {
  width: 100%; 
  margin-bottom: 20px;
  padding: 10px;
}

@media(min-width:800px){
.gacha-list {
    display: flex;
    flex-wrap: wrap; /* 子要素を折り返す */
    gap: 10px; /* 子要素の間に隙間を設ける */
}

.gacha-item {
    width: calc(50% - 10px); /* 2つを横並びにし、間の隙間を考慮する */
    box-sizing: border-box; /* パディングやボーダーを含む幅設定 */
	 border-radius: 15px;
	}
}


.gacha-content {
  border-radius: 10px;                     /* 角丸 */
  box-shadow: 0 4px 12px rgb(21 101 192 / 35%); /* ふわっと影 */
  overflow: hidden;                        /* 子要素の角も揃える */
  margin: 0 auto 32px;                     /* カード間の余白（任意） */
  transition: transform .15s;
  background: #000;
}


/*ガチャ画像*/
.gacha-thumbnail {
 flex: 5; 
 text-align: center;
 overflow: hidden;  /* 画像を切り取らない */
}
.gacha-thumbnail img {
  width: 100%; 
  height:auto;
  transition: transform 0.3s ease;
	border-radius: 10px 10px 0px 0px;            /* 上だけ丸く */
}
.gacha-thumbnail img:hover{
	transform:scale(1.05);
}

.gacha-details {
	flex: 1;
	display: flex;
  flex-direction: column;
}



.remaining-content{
	min-width:60%;
	padding: 5px;
}

/*残り数bar*/
/* ▼ 背景を持つラッパー要素 */
.remaining-bar-wrapper {
  background:#e0e0e0;
  width: 100%;
  height: 7px;
  /* 5px 上に移動 */
	border-radius: 5px;
  transform: translateY(-5px);
  position: relative;
	margin-top: 7px;
}

/* ▼ 実際のバー部分 */
.remaining-bar {
  background-color: #4CAF50;
  height: 100%;
  border-radius: 5px;
	border-color: #333;
}

/* 50%未満：黄色 */
.remaining-bar.is-mid{
  background-color: #ffc107 !important;
}

/* 20%以下：赤 */
.remaining-bar.is-low{
  background-color: #e53935 !important;
}

/* 色変化を滑らかに（任意） */
.remaining-bar{
  transition: background-color .2s ease, background .2s ease;
}


/*ガチャるボタン*/
.gacha-button button {
	margin-right:2px;
	margin-left:2px;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  width:150px
}
/*Top残りやポイント*/
.remaining-info{
	display: flex;
  padding-left: 9px;
  padding-right:9px;
  justify-content: center;
	color:#ffffff;

}

.gacha-price-info{
	color:#ffffff;
	margin-right:5px;
	font-size:14px;
        white-space: nowrap;
}
@media(min-width:1030px){
	.gacha-price-info{
    font-size: 16px;
	}
}

@media(max-width:976px){
	 .gacha-button button{
       padding:11px 5px;
	}
}

/*ガチャリスト横幅など*/
@media(max-width:820px){
    .gacha-button button{

     padding:11px 5px;
	}
    .gacha-list{
		width:95%;
	}
	.remaining-info{
  padding-left: 12px;
  padding-right:12px;
}
}
@media(max-width:800px){
	.gacha-price-info{
    font-size: 20px;
    margin-top: 6px;
	}
}
@media(max-width:700px){
	.gacha-list{
		width:98%;
	}
	.remaining-info{
  padding-left: 7px;
  padding-right:7px;
		font-size:15px;
	}
}
@media(max-width:678px){
 .gacha-price-info {
    font-size: 17px;
    margin-top: 8px;
 }
}
@media(max-width:564px){
 .gacha-price-info {
    font-size: 15px;
    margin-top: 8px;
 }
}
/*一回が二段に*/
@media(max-width:496px){
 .gacha-price-info {
    font-size: 15px;
    margin-top: 8px;
 }
}
@media(max-width:400px){
 .gacha-price-info {
    font-size: 15px;
    margin-top: 8px;
 }
	.gacha-item {
    width: 100%;
    margin-bottom: 20px;
    padding: 5px;
	}
}
@media(max-width:335px){
 .gacha-price-info {
    font-size: 13px;
    margin-top: 8px;
 }
}


/* fガチャるボタンの背景色とテキストの色を変更 */
#gacha1,#gacha10,#gacha100{
 color:#333;
 font-size: 15px; 
 padding: 10px;
 cursor: pointer; /* カーソルをポインターに設定 */
 transition: opacity 0.5s ease, box-shadow 0.5s ease;
 font-weight:550;
}

/* ガチャるホバー時 */
#gacha1:hover, #gacha10:hover, #gacha100:hover {
 opacity: 0.8;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*無限ガチャのフッター*/
#infiGacha1,#infiGacha10,#infiGacha100 {
    color: #333;
    font-size: 15px;
    padding: 10px;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease;
    font-weight: 550;
}
.infi-gacha-button {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
	  padding: 11px 0px;
}

@media(max-width:550px){
	#gacha1,#gacha10,#gacha100{
 color:#333;
 font-size: 13px; 
 cursor: pointer; /* カーソルをポインターに設定 */
 padding:10px;
 margin:2px;
 transition: opacity 0.5s ease, box-shadow 0.5s ease;
 font-weight:550;
	}
#infiGacha1,#infiGacha10,#infiGacha100 {
    color: #333;
    font-size: 13px;
	  padding:10px;
	  margin:2px;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease;
    font-weight: 550;
	}
}

@media(max-width:450px){
	#gacha1,#gacha10,#gacha100{
 color:#333;
 font-size: 11px; 
 cursor: pointer; /* カーソルをポインターに設定 */
 padding:10px;
 margin:2px;
 transition: opacity 0.5s ease, box-shadow 0.5s ease;
 font-weight:550;
	}
#infiGacha1,#infiGacha10,#infiGacha100 {
    color: #333;
    font-size: 11px;
	  padding:10px;
	  margin:2px;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease;
    font-weight: 550;
	}
}

/* モーダルウィンドウのスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* より高い値に設定して他の要素の上に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6); /* 背景をより暗く */
}


/* モーダル内のテキストスタイル */
.modal-content h2 {
  color: #333333;
  margin-bottom: 20px;
}

.modal-content p {
  color: #666666;
  line-height: 1.6;
}

/* 閉じるボタンのスタイル（必要に応じて） */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}





/* フッターに固定するためのスタイル */
.fixed-footer {
    position: fixed;
    bottom: 0;
	left:0px;
	right:0px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #000; /* 背景色を指定（必要に応じて変更） */
    padding: 10px 10px;
    z-index: 1000; /* 他の要素の上に表示するための指定 */

}

/* ボタンを横並びにするためのスタイル */
.fixed-footer button {
    margin: 0 10px; /* ボタン間のマージン */
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
}

/* ボタンのホバースタイル */
.fixed-footer button:hover {
    opacity: 0.8;
}
/* fixed-footerの場合にマックスウィドスを削除 */
.entry-content[data-ast-blocks-layout] > * {
    max-width: 100% !important;
}

.ast-container{
	padding:20px;
}
@media(max-width:800px){
	.fixed-footer button{
		padding: 11px;
		font-size:15px;
	}
  .ast-container{
	  padding:10px;
  }
}
@media(max-width:500px){
    .fixed-footer button {
       border: none;
       cursor: pointer;
       transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
    }
    .fixed-footer button {
			  padding: 11px;
        font-size: 13px;
    }
}
@media(max-width:375px){
    .fixed-footer button {
			  padding: 11px;
        font-size: 11px;
    }
}

/*ボタンやモーダルを横幅一杯に*/
.entry-content[ast-blocks-layout] > *{
 max-width:100% !important;
}


/* モーダルコンテンツのスタイル */
.modal-content {
    background-color: #fff;
    top:50%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #000 !important; /* テキストカラーを黒に設定 */
    margin-top: 0px;
}

/* 閉じるボタンは無くす */
.close {
    display: none; /* 閉じるボタンを非表示に設定 */
}

/* モーダル内のボタンのスタイル */
.modal-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.modal-button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.modal-button.cancel {
    background-color: #fff !important;
    color: #1565C0 !important;
    border: 1px solid #1565C0;
}

.modal-button.confirm {
    color: #fff !important;
    background-color: #1565C0 !important;
}

.modal-button.cancel:hover {
    background-color: #1565C0 !important;
    color: #fff !important;
}

.modal-button.confirm:hover {
  opacity:0.85;
}

/* テキストのスタイル */
.modal-content p {
    color: #000 !important; /* テキストカラーを黒に設定 */
    text-align: center; /* 横中央に配置 */
}


@media (max-width: 768px) {
    /* モーダルコンテンツのスタイル */
    .modal-content {
        background-color: #fff;
        margin-top: 220px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 85%;
        max-width: 400px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        color: #000 !important; /* テキストカラーを黒に設定 */
    }

    /* 閉じるボタンは無くす */
    .close {
        display: none; /* 閉じるボタンを非表示に設定 */
    }

    /* モーダル内のボタンのスタイル */
    .modal-buttons {
        display: flex !important;
        justify-content: space-around !important;
        margin-top: 20px !important;
    }

    .modal-button {
        padding: 10px 20px !important;
        border: none !important;
        cursor: pointer !important;
        font-size: 12px !important;
        border-radius: 5px !important;
			width:auto !important;
        transition: background-color 0.3s ease !important;
    }

    .modal-button.cancel {
        background-color: #fff ;
        color: #ff4d4f !important;
        border: 1px solid #ff4d4f !important; /* ボーダーを追加 */
    }

    .modal-button.confirm {
        color: #ffffff;
    }

    .modal-button.cancel:hover {
        background-color: #ff4d4f;
        color: #fff !important;
    }
    /* テキストのスタイル */
    .modal-content p {
        color: #000 !important; /* テキストカラーを黒に設定 */
    }
}

/*トップページのスクロールを無くす*/
#ast-scroll-top.ast-scroll-top-icon.ast-scroll-to-top-right {
    display: none !important;
}



/* 結果画面 */
.post-248.page.type-page.status-publish.ast-article-single .entry-content ul {
    display: flex;
    flex-wrap: wrap; /* 子要素が見切れる前に折り返すように設定 */
    list-style: none; /* リストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
}

.post-248.page.type-page.status-publish.ast-article-single .entry-content ul li {
    flex: 1 1 200px; /* 子要素の基本サイズを200pxに設定し、残りのスペースを均等に分ける */
    display: flex; /* 子要素の内部もフレックスボックスで配置 */
    flex-direction: column; /* 子要素の内部を縦に並べる */
    align-items: center; /* 子要素の内部を中央揃えにする */
    justify-content: flex-end; /* 子要素の内部を中央揃えにする */
   /* padding: 0px;  子要素の内側にパディングを追加 */
    margin:10px;
    border: 3px solid #fff; /* 子要素にボーダーを追加 */
    border-radius: 10px; /* 子要素の角を丸くする */
    transition: transform 0.3s ease;
    max-width: 300px;
}

.post-248.page.type-page.status-publish.ast-article-single .entry-content ul li img{
	width:150px;
  height:200px;
  margin-top:10px;
}

.post-248.page.type-page.status-publish.ast-article-single .entry-content ul li:hover {
    transform: scale(1.03); /* ホバー時に少し拡大する */
}

.post-248 
/* li内のp要素のスタイルを変更 */
.post-248.page.type-page.status-publish.ast-article-single .entry-content ul li p {
    white-space: nowrap; /* テキストを折り返さないように設定 */
    overflow: hidden; /* テキストがあふれた場合に隠す */
    text-overflow: ellipsis; /* あふれたテキストに省略記号を追加 */
    width: 100%;
    text-align: center;
}
.post-248 label{
	color:#333;
}
.post-248 p{
	color:#333;
}

/*collection内の文字色*/
.page-id-231 h1, 
.page-id-231 .entry-content h1, 
.page-id-231 h2, 
.page-id-231 .entry-content h2, 
.page-id-231 h3, 
.page-id-231 .entry-content h3, 
.page-id-231 h4, 
.page-id-231 .entry-content h4, 
.page-id-231 h5, 
.page-id-231 .entry-content h5, 
.page-id-231 h6, 
.page-id-231 .entry-content h6 {
    color: #333;
}

.page-id-231 label {
    color: #333;
}
.page-id-231 p{
	color:#333;
}

.collection-list img{
	margin-top:25px;
	width:30%;
}

/* フォーム内の画像のスタイルを変更 */
.collection-list form img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

/* ラジオボタンのスタイルを変更 */
.collection-list form input[type="radio"] {
    margin-right: 5px;
    margin-left:5px;
}

/* 送信ボタンのスタイルを変更 */
.collection-list form button[type="submit"] {
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 25px;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
    margin-left:10px;
}

/* 送信ボタンのホバースタイルを変更 */
.collection-list form button[type="submit"]:hover {
    opacity: 0.8;
}

/* フォーム全体のスタイルを変更 */
.collection-list form {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

@media(max-width:730px){
	.collection-list img{
	margin-top:5px;
	width:45%;
	}
.collection-list p{
	font-size:15px;
	}
}
@media(max-width:680px){
	.collection-list {
	font-size:14px;
	}
.collection-list form button[type="submit"] {
    font-size:14px;
	  font-weight:450;
    padding: 5px 10px;
	}
}

/*collectionリストのコード上にもあり*/
.collection-list {
    display: flex;
    flex-wrap: wrap; /* 子要素が見切れる前に折り返すように設定 */
    list-style: none; /* リストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
	  justify-content: center;
}

.collection-list li {
		margin-top: 20px;
    flex: 1 1 200px; 
    display: flex; /* 子要素の内部もフレックスボックスで配置 */
    flex-direction: column; /* 子要素の内部を縦に並べる */
    align-items: center; /* 子要素の内部を中央揃えにする */
   /* padding: 0px;  子要素の内側にパディングを追加 */
    margin:10px;
    border: 3px solid #fff; /* 子要素にボーダーを追加 */
    border-radius: 10px; /* 子要素の角を丸くする */
    max-width: 300px;
    transition: transform 0.3s ease;
    justify-content: flex-end;
}

.collection-list li p{
    text-overflow: ellipsis; /* あふれたテキストに省略記号を追加 */
    width: 100%;
    text-align: center;
}
.collection-list li img{
	width:150px;
  height:200px;
  margin-top:10px;
}
.collection-list li:hover {
    transform: scale(1.01); /* ホバー時に少し拡大する */
}
.collection-filter{
	display:flex !important;
	flex-direction:column;
}
.sort-order span{
	color:#333;
	margin-left:15px;
}

/*左上のカードの状況を示す文字のデザイン*/
.page-id-231 .collection-filter a {
    display: inline-block;
    margin-right: 5px; /* 各リンクの間隔を調整 */
	  margin-left:5px;
    padding: 8px 16px; /* ボタンの内側の余白を設定 */
    color: #333; /* テキストカラー */
    background-color: #ffffff; /* ボタンの背景色 */
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; 
    font-weight: bold; /* 太字にする */
    transition: all 0.3s ease; 
    box-shadow: 0 4px 11px rgb(21 101 192 / 18%);
    border: 1px solid rgba(21, 101, 192, .25);
}
.page-id-231 .collection-filter a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
    transform: scale(1.01); 
}

.page-id-231 .site-main{
  margin-top: 40px;
}

@media(max-width:719px){
	.page-id-231 .collection-filter a {
    display: inline-block;
    margin-right: 2px;
		margin-left: 2px;
    padding: 6px 13px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
	}
	.sort-order span {
    color: #333;
    margin-left: 15px;
	}
}

@media(max-width:647px){
	.page-id-231 .collection-filter a {
    display: inline-block;
    margin-right: 0px;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
	}
	.sort-order span {
    color: #333;
    margin-left: 5px;
	}
}
@media (max-width: 598px) {
		.page-id-231 .collection-filter a {
    display: inline-block;
    margin-right: 0px;
    padding: 4px 7px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
		font-size:14px;
	}
}
@media (max-width: 530px) {
	.collection-filter {
    display: flex !important;
    flex-direction: column;
    margin-left: 5px !important;
	}
	.sort-order{
		 margin-top: 9px;
	}
	.page-id-231 .collection-filter a {
        display: inline-block;
        margin-right: 5px;
        padding: 8px 12px;
        
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        font-size: 15px;
        margin-left: 5px;
    }
	.status-filter {
	   margin-bottom:8px;
	}
}
@media (max-width: 440px) {
	.collection-filter {
    display: flex !important;
    flex-direction: column;
    margin-left: 5px !important;
	}
	.page-id-231 .collection-filter a {
        display: inline-block;
        margin-right: 2px;
        padding: 5px 9px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        font-size: 12px;
        margin-left: 2px;
    }
		.status-filter {
	   margin-bottom:3px;
	}
}
@media (max-width: 377px) {
  .collection-list li {
    flex: 1 1 150px; /* ボタンの最小幅を縮小 */
    margin: 5px; /* マージンを小さく */
    max-width: 200px; /* ボタンの最大幅を縮小 */
    border: 2px solid #fff; /* ボーダー幅を縮小 */
    border-radius: 8px; /* 角丸を小さく */
  }

  .collection-list li p {
    font-size: 0.8rem; /* テキストサイズを縮小 */
  }
	/*左上のカードの状況を示す文字のデザイン*/
  .page-id-231 .collection-filter a {
    display: inline-block;
    margin-right: 2px; /* 各リンクの間隔を調整 */
    padding: 4px 4px; /* ボタンの内側の余白を設定 */
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; 
    transition: all 0.3s ease;
  }
  .page-id-231 .collection-filter a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
    transform: scale(1.01); 
  }

  .collection-filter {
    flex-direction: column; /* 並び順のボタンを縦方向に配置 */
    align-items: center; /* 中央揃え */
    gap: 5px; /* ボタン間のスペースを縮小 */
	  margin-left: 0px !important;
  }
	.sort-order{
		margin-top:5px;
	}

  .sort-order span {
    font-size: 0.9rem; /* ラベルのフォントサイズを縮小 */
  }

  .sort-order a {
    padding: 4px 8px; /* ボタンのパディングを小さく */
    font-size: 0.8rem; /* ボタンのフォントサイズを縮小 */
  }

}


ul.collection-list {
  margin: 0;
  padding: 0;
  list-style: none;  /* リストマーカーを消す */
  margin-top: 25px;
}

.collection-list {
  /* 2枚目のようにカードを並べるためflexを使用 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* 中央寄せ */
  gap: 16px;                 /* カード間の余白 */
}

.collection-list li {
  /* カード風のデザイン */
  max-width: 200px;              /* カードの幅はお好みで */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  padding: 12px;
  position: relative;        /* 必要に応じて */
	
}

/* 画像（例: デモBドラゴンなど） */
.collection-list li img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  /* 画像のアスペクト比維持用。必要に応じて高さ固定など */
}

.collection-list li p {
  margin: 6px 0;
  font-size: 18px;
  color: #ed357b;
}

/* 価格の部分だけ色やサイズを変えたい場合の例 */
.collection-list li p:nth-of-type(2) {
  color: #222;
  margin-top:-3px;
  font-size: 17px;
  font-weight: bold;
}

.collection-list li p:nth-of-type(1){
  font-weight: bold;
}

.collection-list li p:nth-of-type(3){
  background-color: #eeeeeecf;
  padding: 5px 12px;
}

.collection-list li label {
  display: flex;       /* 縦並びにする */
  margin-top: 4px;      /* ラベル間の余白 */
  font-size: 12px;
  color: #333;
  cursor: pointer;      /* ポインタ形状に変更（好みで） */
}

/* ラジオボタンそのものを少し小さくしたい場合の例 */
.collection-list li input[type="radio"] {
  transform: scale(0.9);
  margin-right: 4px;
}


@media (max-width: 1200px) {
  .collection-list li {
    width: 180px;
    margin: 6px;
    padding: 8px;
  }
  .collection-list li img {
    max-width: 180px;
    margin: 0 auto;
    display: block;
  }
  .collection-list li label {
    margin-top: 2px;
  }
}

@media (max-width: 992px) {
  .collection-list li {
    width: 160px;
    margin: 6px;
    padding: 8px;
  }
  .collection-list li img {
    max-width: 160px;
    margin: 0 auto;
  }
  .collection-list li label {
    margin-top: 2px;
  }
}

@media (max-width: 768px) {
  .collection-list li {
    width: 140px;
    margin: 4px;
    padding: 6px;
  }
  .collection-list li img {
    max-width: 140px;
    margin: 0 auto;
  }
  .collection-list li label {
    margin-top: 2px;
  }
}
@media (max-width: 470px) {
  .collection-list li {
    width: 48%;
    margin:0px auto;
    padding: 6px;
	  flex: 1 1 140px !important;
  }
}
@media (max-width: 458px) {
  .collection-list li {
    width: 48%;
    margin:0px auto;
    padding: 6px;
	  flex: 1 1 130px !important;
  }
	.collection-list li p{
		font-size:15px;
	}
	.collection-list li p:nth-of-type(2){
		font-size:15px;
	}
  .collection-list li img {
    max-width: 70% !important;
    margin: 0 auto;
  }
  .collection-list li label {
    margin-top: 2px;
		font-size: 12px;
  }
}

@media (max-width: 320px) {
  .collection-list li {
    width: 45% !important;
    margin: 4px auto;
    padding: 4px;
		flex: 1 1 160px;
  }
  .collection-list li img {
    max-width: 50%;
    margin: 0 auto;
  }
  .collection-list li label {
    margin-top: 1px;
  }
}
@media (min-width: 320px) and (max-width: 400px) {
  .collection-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important; /* 必要に応じて調整可能 */
  }

  .collection-list li {
    width: 100% !important; /* gridにあわせて幅調整 */
		max-width:165px;
  }
}
/*collectionの自動売却の文章*/
.notice-sentence{
	color:red !important;
}

/*結果画面にも同じデザイン　ガチャ詳細ページ*/
#gacha-result-form ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  margin-top: 25px;
  display: flex;           /* 2枚目のようにカードを並べる */
  flex-wrap: wrap; 
  justify-content: center; /* 中央寄せ */
  gap: 16px;               /* カード間の余白 */
}

#gacha-result-form ul li {
  max-width: 200px;        /* カードの幅(お好みで調整) */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  padding: 12px;
  position: relative; 
}

#gacha-result-form ul li img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

#gacha-result-form ul li p {
  margin: 6px 0;
  font-size: 18px;
  color: #ed357b;
}

/* 2番目のだけ少し調整する例 */
#gacha-result-form ul li p:nth-of-type(2) {
  color: #222;
  font-weight: bold;
  margin-top: -3px;
  font-size: 17px;
}
#gacha-result-form ul li p:nth-of-type(1) {
  font-weight: bold;
}


#gacha-result-form ul li label {
  display: block;    
  margin-top: 4px;   
  font-size: 12px;
  color: #333;
  cursor: pointer;   
}

/* ラジオボタンを小さく */
#gacha-result-form ul li input[type="radio"] {
  transform: scale(0.9);
  margin-right: 4px;
}

@media (max-width: 1200px) {
  #gacha-result-form ul li {
    width: 180px;
    margin: 6px;
    padding: 8px;
  }
  #gacha-result-form ul li img {
    max-width: 180px;
    margin: 0 auto;
    display: block;
  }
  #gacha-result-form ul li label {
    margin-top: 2px;
  }
}

@media (max-width: 992px) {
  #gacha-result-form ul li {
    width: 160px;
    margin: 6px;
    padding: 8px;
  }
  #gacha-result-form ul li img {
    max-width: 160px;
    margin: 0 auto;
  }
  #gacha-result-form ul li label {
    margin-top: 2px;
  }
}

@media (max-width: 768px) {
  #gacha-result-form ul li {
    width: 140px;
    margin: 4px;
    padding: 6px;
  }
  #gacha-result-form ul li img {
    max-width: 140px;
    margin: 0 auto;
  }
  #gacha-result-form ul li label {
    margin-top: 2px;
  }
}

@media (max-width: 470px) {
  #gacha-result-form ul li {
    width: 48%;
    margin: 0px auto;
    padding: 6px;
    flex: 1 1 140px !important;
  }
}

@media (max-width: 458px) {
  #gacha-result-form ul li {
    width: 48%;
    margin: 0px auto;
    padding: 6px;
    flex: 1 1 130px !important;
  }
  #gacha-result-form ul li p {
    font-size: 15px;
  }
  #gacha-result-form ul li p:nth-of-type(2) {
    font-size: 15px;
  }
  #gacha-result-form ul li img {
    max-width: 70% !important;
    margin: 0 auto;
  }
  #gacha-result-form ul li label {
    margin-top: 2px;
    font-size: 12px;
  }
}

@media (max-width: 320px) {
  #gacha-result-form ul li {
    width: 45% !important;
    margin: 4px auto;
    padding: 4px;
    flex: 1 1 160px;
  }
  #gacha-result-form ul li img {
    max-width: 50%;
    margin: 0 auto;
  }
  #gacha-result-form ul li label {
    margin-top: 1px;
  }
}
/*結果画面にも同じデザイン　ガチャ詳細ページ終わり*/



/* 
  1) 「賞画像」を全賞で統一デザインに 
  （中央寄せ＆同じ比率にしたい場合）
*/
.prize-rank-image {
  text-align: center; /* 画像を中央寄せ */
  margin: 0 auto;
}


.prize-rank-image img {
    display: inline-block;
    max-width: 30%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 10px;
}

@media(max-width:550px){
	.prize-rank-image img {
        display: inline-block;
        height: auto;
        margin-top: 15px;
        margin-bottom: 5px;
	}
}
@media(max-width:380px){
	.prize-rank-image img {
        display: inline-block;
        height: auto;
        margin-top: 10px;
        margin-bottom: 0px;
	}
}

/* =========================
   全ての賞の列数を「2列」で固定（上書き）
   ※このブロックはCSSの一番下に置く
========================= */
.ss-prize-section .ss-prize-items,
.s-prize-section .s-prize-items,
.a-prize-section .a-prize-items,
.b-prize-section .b-prize-items,
.c-prize-section .c-prize-items,
.d-prize-section .d-prize-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
}

/* C賞：画像のセレクタ（ドット抜け修正） */
.c-prize-section .c-prize-item img {
  padding: 5px;
  height: auto;
}

/* 31枚目以降を非表示（効く形に整理） */
.c-prize-items > .prize-image.c-prize-item:nth-child(n+31) {
  display: none !important;
}

/* D賞：画像のセレクタ（ドット抜け修正） */
.d-prize-section .d-prize-item img {
  padding: 5px;
  height: auto;
}

/* 41枚目以降を非表示（効く形に整理） */
.d-prize-items > .prize-image.d-prize-item:nth-child(n+41) {
  display: none !important;
}




/* ラストワン賞のコンテナ（商品画像を2列中央寄せ） */
.last-one-prize-section >.last-one-prize-items {
  display: grid;
  justify-items: center;
}
.last-one-prize-section.last-one-prize-item img {
  padding: 5px;
  height: auto;
}
.prize-image.last-one-prize-item {
	display: flex;
  justify-content: center;
	width:60%;
}


#gacha-animation {
    position: fixed; /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* 他の要素よりも上に表示 */
    background-color: black; /* 背景を黒にする */
    overflow: hidden; /* はみ出した部分を非表示にする */
	display: flex;
	align-items: center;
  }
  
#gacha-animation video {
    width: 100vw;
    height: auto;
    object-fit: cover; /* アスペクト比を維持して画面全体に表示 */
}
@media only screen and (max-width: 768px) {
	.page-id-250 img{
		max-width: none !important;
	}
	.page-id-246 img{
		max-width: none !important;
	}
	.page-id-240 img{
		max-width: none !important;
	}
	#gacha-animation {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #gacha-animation video {
        width: auto;
        height: 100vh; /* 高さを自動調整 */
        object-fit: contain; /* 横幅にフィットさせて高さを維持 */
    }
}


/*ガチャの説明装飾*/
.gacha-prize-title{
	  border: 2px solid white; 
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: white; 
    font-weight: bold; 
}


.add-submit-button {
    position: fixed;
    bottom: 0;
	left:0px;
	right:0px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #000; /* 背景色を指定（必要に応じて変更） */
    padding: 10px 0;
    z-index: 1000; /* 他の要素の上に表示するための指定 */

}

/* コレクションの一括設定ボタン */
.add-submit-button button {
    margin: 0 10px;
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
    background: linear-gradient(135deg, #1565C0, #00BCD4);
}
/* ボタンのホバースタイル */
.add-submit-button button:hover {
    opacity: 0.8;
}
.submit-button{
    color: #fff !important;
    font-size: 15px;
    padding: 10px 35px;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease;
    font-weight: 550;
	width:100%;
}
.submit-button:hover{
	opacity:0.8;
}

/* WC 注文完了ページの「ショップに戻る」ボタンだけ強制的に白 */
body.woocommerce-page div.add-submit-button .submit-button{
  color:#ffffff !important;   /* 3 つの class を積んで specificity で勝つ */
}

/* ページIDが118ログインの真っ白問題*/
.select2-container--default .select2-results>.select2-results__options {
  background-color: #fff;
}
/*新規登録・ログインボタンの色*/
body.page-id-59.um-page .um-button {
    color: white !important; /* ボタンの文字色を白に設定 */
}
body.page-id-60.um-page .um-button {
    color: white !important; /* ボタンの文字色を白に設定 */
}
.um-field-area:hover input {
    background-color: #fff !important;
}

h1, .entry-content h1, h2, .entry-content h2, h3, .entry-content h3, h4, .entry-content h4, h5, .entry-content h5, h6, .entry-content h6{
	color:#fff;
}

/* モーダル内の文字は白文字ルールを上書きして黒に */
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6,
.modal-content p, .modal-content label, .modal-content span,
.modal-content li, .modal-content td, .modal-content th {
    color: #333 !important;
}


/* 以下フッター */


/*Copyrightの下の隙間を小さくする*/
.site-primary-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item.ast-builder-grid-row-full.ast-builder-grid-row-tablet-full.ast-builder-grid-row-mobile-full.ast-footer-row-stack.ast-footer-row-tablet-stack.ast-footer-row-mobile-stack{
	padding-top:30px;
	padding-bottom:0px;
}

ul#astra-footer-menu li a {
    display: inline-block;
    margin-right: 10px; /* Space between links */
    padding: 8px 16px; /* Padding for button-like feel */
    color: #333; /* Text color */
    background-color: #fff !important; /* Background color for links */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    -webkit-tap-highlight-color: transparent;
}



/* hover相当をスマホにも適用 */
ul#astra-footer-menu li a:hover,
ul#astra-footer-menu li a:active,
ul#astra-footer-menu li a:focus,
ul#astra-footer-menu li a:focus-visible,
ul#astra-footer-menu li a:visited:active,
ul#astra-footer-menu li a:visited:hover {
    background-color: #1565C0 !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(21, 101, 192, 0.3) !important;
    transform: scale(1.02);
    outline: none;
}



/* フッターの下部ボーダーのみを非表示にする */
.site-footer .site-below-footer-wrap {
    border-top: none !important;
}
/* フッターメニュー項目の間に縦方向の隙間を追加 */
@media(max-width:922px){
    ul#astra-footer-menu li {
        margin-bottom: 10px; /* メニュー項目間の縦方向の隙間 */
    }

    ul#astra-footer-menu li:last-child {
        margin-bottom: 0; /* 最後の項目には余計な隙間を追加しない */
    }
}

/*Footerのすべての見出しを黒に*/
article#post-545 h1,
article#post-545 h2,
article#post-545 h3,
article#post-545 h4,
article#post-545 h5,
article#post-545 h6,
article#post-545 a,
article#post-493 h1,
article#post-493 h2,
article#post-493 h3,
article#post-493 h4,
article#post-493 h5,
article#post-493 h6,
article#post-493 a,
article#post-3 h1,
article#post-3 h2,
article#post-3 h3,
article#post-3 h4,
article#post-3 h5,
article#post-3 h6,
article#post-3 a,
article#post-1880 h1,
article#post-1880 h2,
article#post-1880 h3,
article#post-1880 h4,
article#post-1880 h5,
article#post-1880 h6,
article#post-1880 a {
  color: #333;
}

/* 結果画面ボタンデザインを適用 */
button.text-link {
    display: inline-block;
    margin-right: 10px; /* リンク間のスペース */
    padding: 8px 16px; /* ボタン風のパディング */
    border-radius: 5px; /* 角を丸める */
    text-decoration: none; /* 下線を削除 */
    font-weight: bold; /* 太字 */
    transition: all 0.3s ease; /* ホバー効果のスムーズなトランジション */
    box-shadow: 0 4px 12px rgb(21 101 192 / 35%); /* 立体感のための影 */
    border: none; /* ボタンのデフォルトボーダーを削除 */
    cursor: pointer; /* マウスカーソルをポインタに変更 */
}

/* ホバー効果 */
button.text-link:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時の強い影 */
    transform: scale(1.02); /* ホバー時に少し拡大 */
}

@media(max-width:650px){
button.text-link {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 6px;
    color: #333;
    background-color: #f0f0f0;
    border-radius: 5px;
    border: none;
    cursor: pointer;
	font-size:18px;
      box-shadow: 0 3px 4px rgb(21 101 192 / 15%);
	}
}
@media(max-width:595px){
button.text-link {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 6px;
    color: #333;
    background-color: #f0f0f0;
    border-radius: 5px;

    border: none;
    cursor: pointer;
	font-size:12px;
	}
	.page-id-248 .nav-links {
		    display: flex;
        flex-wrap: nowrap;
	}
}
@media(max-width:480px){
	.nav-links {
    display: flex;
    gap: 5px !important;
    margin-bottom: 25px;
	}
}
@media(max-width:360px){
	button.text-link {
    display: inline-block;
    margin-right: 7px;
    padding: 6px 3px;
    color: #333;
    border: none;
    cursor: pointer;
	font-size:12px;
	}
}

/* ===== 結果ページのガイド ===== */
.page-id-248 .result-guide{
  max-width: 900px;
  margin: 12px auto 27px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
}
.page-id-248 .result-guide__title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 4px;
  color: #1565C0;
}
.page-id-248 .result-guide__desc{
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* ===== ナビの整列（PCでもwrapして詰まらないように） ===== */
.page-id-248 .nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0 27px;
}

/* ===== 既存 .text-link を活かしつつ、種類を追加 ===== */
.page-id-248 button.text-link{
  background: #fff; /* いまの黄色ベースを踏襲 */
  color: #333;
  border: 1px solid rgba(21, 101, 192, .25);
}


.page-id-248 button.text-link--danger{
  background: #ff4d4f;
  color: #fff;
  border: 0px solid rgba(21,101,192,.25);
}

/* hover時は暗くする系（前にやったのと同じ方向性） */
.page-id-248 button.text-link:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.page-id-248 button.text-link:active{
  filter: brightness(0.9);
  transform: translateY(0);
}
.page-id-248 .site-main{
  margin-top: 40px;
}




/*在庫なしの文字*/
/* 特定のページだけに適用 */
.page-id-246 .entry-content.clear {
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    height: 100vh; /* 親コンテナを画面全体の高さに設定 */
    text-align: center; /* テキストを中央揃え */
    position: relative; /* 必要に応じて相対位置 */
}

/* point商品の画像 */
@media (max-width: 921px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary,
    .woocommerce #content div.product div.images,
    .woocommerce #content div.product div.summary,
    .woocommerce-page div.product div.images,
    .woocommerce-page div.product div.summary,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page #content div.product div.summary {
        display: block;
        width: 50%;
        height: auto;
        box-shadow: none;
    }
}

body.um-page #content *{
   color: #333 !important;
}
body.um-page #content .button,
body.um-page #content button,
body.um-page #content a.button,
body.um-page #content input[type="submit"],
body.um-page #content input[type="button"] { color: #fff !important; }
a.real_url[href="https://sunistgacha.com/mypage-kari/"] {
    display: none !important;
}

.woocommerce-js h2{
  font-size: 36px !important;
}
/*全てのタイトルを小さく*/
@media(max-width:500px){
	.woocommerce-js h2 {
    margin-bottom: .7em;
		margin-left: 5px !important;
		font-size: 28px !important;
	}
}

/* 特定ページ（1565 / 493）の文字色を #333 に統一 */
body.page-id-1565,
body.page-id-493,
body.page-id-1880{
    color: #333;
}

/* 見出しも確実に揃えたい場合 */
body.page-id-1565 h1,
body.page-id-1565 h2,
body.page-id-1565 h3,
body.page-id-1565 h4,
body.page-id-1565 h5,
body.page-id-1565 h6,
body.page-id-493 h1,
body.page-id-493 h2,
body.page-id-493 h3,
body.page-id-493 h4,
body.page-id-493 h5,
body.page-id-493 h6,
body.page-id-1880 h1,
body.page-id-1880 h2,
body.page-id-1880 h3,
body.page-id-1880 h4,
body.page-id-1880 h5,
body.page-id-1880 h6 {
    color: #333;
}

/* お知らせカード内（念のため明示） */
body.page-id-1565 .gg-news-card,
body.page-id-493 .gg-news-card {
    color: #333;
}

body.page-id-1565 .gg-news-card a,
body.page-id-493 .gg-news-card a {
    color: #333;
}




/*ガチャ演出*/
@media(min-width:601px){
	#fullscreen-video {
    width: 100vw;
    height: 100vh;
  }
}
@media(max-width:600px){
		#fullscreen-video {
    width: 100vw !important;
    height: auto !important;
  }
}
@media(min-width:630px){
	#skip-button{
		color:#888 !important;
		right:10% !important;
	}
}

/*トグルを非表示*/
.ast-arrow-svg{
	z-index:-1;
}
@media(min-width:920px){
	.ast-arrow-svg{
		display:none;
	}
}
.ast-menu-toggle{
	width:100% !important;
}


/* 残り回数バー */
.page-id-233 .gacha-remaining,
.page-id-242 .gacha-remaining,
.page-id-244 .gacha-remaining,
.page-id-1691 .gacha-remaining {
    flex: 4;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
}

@media (max-width: 500px) {
    /* スマホ時にも1691を追加 */
    .page-id-242 .gacha-remaining,
    .page-id-244 .gacha-remaining,
    .page-id-1691 .gacha-remaining {
        flex: 4;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        margin-top: -20px;
    }
}

/* 価格情報（px, ptなど） */
.page-id-233 .gacha-price-info,
.page-id-242 .gacha-price-info,
.page-id-244 .gacha-price-info,
.page-id-1691 .gacha-price-info,
.post-233 .gacha-price-info,
.post-242 .gacha-price-info,
.post-244 .gacha-price-info,
.post-1691 .gacha-price-info {
    color: #333;
    margin-right: 2px;
    margin-left: 2px;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 800px) {
    .page-id-233 .gacha-price-info,
    .page-id-242 .gacha-price-info,
    .page-id-244 .gacha-price-info,
    .page-id-1691 .gacha-price-info {
        margin-right: 15px;
        margin-left: 5px;
        font-size: 20px;
        margin-top: 6px;
    }
}

@media (max-width: 678px) {
    .page-id-233 .gacha-price-info,
    .page-id-242 .gacha-price-info,
    .page-id-244 .gacha-price-info,
    .page-id-1691 .gacha-price-info {
        margin-right: 20px;
        margin-left: 5px;
        font-size: 17px;
        margin-top: 8px;
    }
}

@media (max-width: 564px) {
    .page-id-233 .gacha-price-info,
    .page-id-242 .gacha-price-info,
    .page-id-244 .gacha-price-info,
    .page-id-1691 .gacha-price-info {
        margin-right: 10px;
        margin-left: 5px;
        font-size: 15px;
        margin-top: 8px;
    }
}

@media (max-width: 496px) {
    .page-id-233 .gacha-price-info,
    .page-id-242 .gacha-price-info,
    .page-id-244 .gacha-price-info,
    .page-id-1691 .gacha-price-info {
        margin-right: 5px;
        margin-left: 5px;
        font-size: 15px;
        margin-top: 8px;
    }
}

@media (max-width: 324px) {
    .page-id-233 .gacha-price-info,
    .page-id-242 .gacha-price-info,
    .page-id-244 .gacha-price-info,
    .page-id-1691 .gacha-price-info {
        margin-right: 4px;
        margin-left: 4px;
        font-size: 14px;
        margin-top: 8px;
    }
}

/* プログレスバー本体 */
.page-id-233 .remaining-bar,
.page-id-242 .remaining-bar,
.page-id-244 .remaining-bar,
.page-id-1691 .remaining-bar {
    background-color: #fb9944;
    height: 100%;
    border-radius: 5px;
    border-color: #333;
}

/* 残数テキスト */
.page-id-233 .remaining-info,
.page-id-242 .remaining-info,
.page-id-244 .remaining-info,
.page-id-1691 .remaining-info {
    display: flex;
    padding-left: 9px;
    padding-right: 9px;
    justify-content: center;
    color: #333;
    font-weight: 700;
}

@media (max-width: 820px) {
    .page-id-233 .remaining-info,
    .page-id-242 .remaining-info,
    .page-id-244 .remaining-info,
    .page-id-1691 .remaining-info {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 700px) {
    .page-id-233 .remaining-info,
    .page-id-242 .remaining-info,
    .page-id-244 .remaining-info,
    .page-id-1691 .remaining-info {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 15px;
    }
}

/* ========= 残りバー：割合による色変更（共通） ========= */
/* 50%未満：黄色 */
.page-id-233 .remaining-bar.is-mid,
.page-id-242 .remaining-bar.is-mid,
.page-id-244 .remaining-bar.is-mid,
.page-id-1691 .remaining-bar.is-mid{
  background-color: #ffc107 !important;
  background: #ffc107 !important;
}

/* 20%以下：赤 */
.page-id-233 .remaining-bar.is-low,
.page-id-242 .remaining-bar.is-low,
.page-id-244 .remaining-bar.is-low,
.page-id-1691 .remaining-bar.is-low{
  background-color: #e53935 !important;
  background: #e53935 !important;
}

/* 色変化を滑らかに（任意） */
.page-id-233 .remaining-bar,
.page-id-242 .remaining-bar,
.page-id-244 .remaining-bar,
.page-id-1691 .remaining-bar{
  transition: background-color .2s ease, background .2s ease;
}

/* トップページ以外では info（価格情報）を非表示 */
body:not(.home) .gacha-price-info{
  display: none !important;
}



.page-id-3 h3,
.page-id-3 {
	color:#1E293B;
	
}
html, body {
    overflow-x: hidden !important; /* 横スクロールを隠す */
}

/* 「操作」見出しセルと隣のセルをまるごと非表示にする */
.woocommerce-table--order-details tfoot tr th.order-actions--heading,
.woocommerce-table--order-details tfoot tr th.order-actions--heading + td {
  display: none !important;
}

.notice-wrap{
	display:none !important;
}

@media (min-width: 545px) and (max-width: 720px) {
  .wp-block-image img.wp-image-1607 {
    margin-top: 10px !important;
  }
}
/* 1. コインアイコン（選択画像）の margin-top を 0 に */
#collection-form .collection-list li > p:nth-of-type(3) img {
  margin-top: -2px !important;
}

/* 2. 1200px 以下ではアイコンと文字を常に横並びに */
@media (max-width: 1200px) {
  /* アイコン＋“100pt” の親要素を flex 化 */
  #collection-form .collection-list li > p:nth-of-type(3) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 2px !important;
    white-space: nowrap;
  }

  /* コインアイコンそのものの余白を完全に消す */
  #collection-form .collection-list li > p:nth-of-type(3) img {
    margin: 0 !important;
    padding: 0 !important;
    /* 必要あれば幅・高さも再指定 */
    width: 20px;
    height: 20px;
		margin-top: -1px !important;
  }

  /* アイコンとテキストの間隔を微調整したい場合は、
     下記の margin-right の値を変えてください */
  #collection-form .collection-list li > p:nth-of-type(3) img {
    margin-right: 4px !important;
  }
}
  
#gacha-result-form ul li > p:nth-of-type(3) img {
		margin-top: -1px !important;

}

@media (max-width: 1200px) {
  #gacha-result-form ul li > p:nth-of-type(3) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
		margin-bottom:5px!important;

  }
  #gacha-result-form ul li > p:nth-of-type(3) img {
    margin: 0 !important;
    padding: 0 !important;
    width: 20px;
    height: 20px;
		margin-top: -1px !important;
		margin-right:4px !important;
  }
}
#gacha-result-form ul li p:nth-of-type(3) {
  background-color: #eeeeeecf;
  padding: 5px 15px !important;
}

@media (min-width: 850px) {
  .item-quantity-badge {
    font-size: 12px !important;
    padding: 3px 8px !important;
  }
}
.item-quantity-badge {
    border: none !important;
    box-sizing: border-box;
}

.um-tip .um-tip-w{
	color:white;
}

/* ---------- ガチャボタンのレイアウト ---------- */
.gacha-button {                    /* ← ボタンを内包している div */
  display: grid;                   /* 2 列グリッドに変更 */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;                       /* ボタン間の余白 */
  justify-items: center;           /* 各セル内で中央寄せ */
	padding: 11px 15px;
}

/* 100連ボタンだけ 2 列ぶち抜き & 幅いっぱい */
.gacha-button .gacha-button-multi.gacha-100 {
  grid-column: 1 / -1;             /* 1 列目〜最後の列まで＝横幅全域 */
  width: 100%;
}

/* 既存のボタン共通スタイル（大きさ・丸みなど） */
.gacha-button-single,
.gacha-button-multi.gacha-10,
.gacha-button-multi.gacha-100 {
	width: 100% !important;
  padding:       12px 10px !important;  /* 縦横余白を増やして大きめに */

}
.gacha-button-single{
	  background-color: #888 !important;
    color:#ffffff !important;
}
.gacha-button-multi.gacha-10{
	  background-color: #1565C0 !important;
  color:            #ffffff !important;
}
/* 100連ボタンだけ赤背景（色はお好みで） */
.gacha-button-multi.gacha-100 {
  background: linear-gradient(90deg, #ff0000, #ff7a00, #fff700, #10f72c, #00e7ff, #2b50ff, #9f00ff) !important;
  border-color:     #ec398e !important;
  color:            #ffffff !important;
	  font-size: 1.1rem;
}
.gacha-button-multi.gacha-100.disabled{
    background: #ccc !important;

}

/* コインアイコンなどがある場合の微調整（任意） */
.gacha-button-single i,
.gacha-button-multi i {
  margin-right: 8px !important;
  font-size:    1.2em !important;
}

/* -------------------------------------------------
    一日一回無料 —— 100連と同じく横幅100%
------------------------------------------------- */
.gacha-button .gacha-button-daily {
  grid-column: 1 / -1;         /* グリッド 2 列ぶち抜き */
  width: 100%;
}

/* 「一日一回無料」の配色を 1回・10回と合わせたい場合（任意） */
.gacha-button-daily {
  background-color: #ffcf47 !important;   /* 同じ黄色 */
  border-color:     #ffcf47 !important;
  color:            #333333 !important;
}
/* =======================================================
   1) ボタン内の文字をタテヨコ中央寄せ
   ======================================================= */
.fixed-footer button,
.gacha-button   button,          /* ← 通常表示ブロック */
.fixed-footer .infi-gacha-button,
.gacha-button   .infi-gacha-button,
.gacha-button-daily {
  display: flex !important;      /* フレックスで中央寄せ */
  align-items:    center !important;
  justify-content:center !important;
  text-align:     center !important;
  line-height:    1.3;           /* 2 行になっても詰まり過ぎないように調整 */
  border-radius: 6px;
}

/* =======================================================
   2) フッター内 infi ガチャ（無限ガチャ？）も
      通常と同じ 2 段レイアウトに揃える
   ======================================================= */
.fixed-footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-items: center;
}

.fixed-footer .gacha-1{
	background-color: #888 !important;
  color: #ffffff !important;
}
.fixed-footer .gacha-10{
	background-color: #1565C0 !important;
  color: #ffffff !important;
}

/* 100連（gacha-100）と 無料 1 回ボタンは幅いっぱい */
.fixed-footer .gacha-100,
.fixed-footer .gacha-button-daily,
.fixed-footer .infi-gacha-button.gacha-100 {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, #ff0000, #ff7a00, #fff700, #10f72c, #00e7ff, #2b50ff, #9f00ff) !important;
  border-color: #ec398e !important;
  color: #ffffff !important;
  font-size: 1.1rem;
}

/* 共通サイズ調整（まだ入れていなければ） */
.fixed-footer .gacha-1,
.fixed-footer .gacha-10,
.fixed-footer .gacha-100,
.fixed-footer .infi-gacha-button {
  color: #fff !important;
  width: 100% !important;
  padding: 8px 10px !important;
}

/* 100連を赤背景に（すでに書いてあれば不要） */
.fixed-footer .gacha-100,
.fixed-footer .infi-gacha-button.gacha-100 {
  background-color: #1565C0 !important;
  color:            #ffffff !important;
}

/* 一日一回無料ボタンの配色（任意・黄色に合わせる例） */
.gacha-button-daily {
  background-color: #1565C0 !important;
  color:            #fff !important;
}

@media (max-width: 400px){

	/* 1回ガチャ用ボタン */
	.gacha-button-single,

	/* 10回／100回ガチャ用ボタン（同じ要素に複数クラスが付いている） */
	.gacha-button-multi.gacha-10,
	.gacha-button-daily.gacha-limited,
	.gacha-button-onetime{

		font-size: 0.8rem;   /* 好きなサイズに */
	}
}


/* =====================================================
   無料1回ガチャ ＆ 課金版 daily-paid をフルワイドで表示
   ===================================================== */

/* 通常ブロック (.gacha-button) とフッター (.fixed-footer) の両方に対応 */
.gacha-button .gacha-button-daily.gacha-limited,
.fixed-footer .gacha-limited,
.gacha-button .gacha-button-onetime,
.fixed-footer .gacha-onetime {
  /* 2列グリッドをぶち抜き → 横幅100% */
  grid-column: 1 / -1 !important;
  width: 100%;

  /* ボタン共通の見た目（丸み・余白など）も合わせておくと統一感アップ*/
  padding: 13px 10px;
  font-size: 1.1rem;
	background-color: #ec398e !important;
  border-color:     #ec398e !important;
  color:            #ffffff !important;
  /* 中央寄せ（flex）――まだ入れていなければ */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* 例：配色を 1回・10回と同じ黄色にしたい場合は任意で */
.gacha-limited,
.gacha-button-onetime {
  background-color: #ec398e !important;
  border-color:     #ec398e !important;
  color:            #ffffff !important;
}
.gacha-price-info,
.remaining-info {
	display:flex;
	align-items:baseline;
  justify-content: flex-start;
}

.gacha-remaining .label { 
	font-size:.75rem; 
	font-weight:400; 
	line-height:1;
	white-space: nowrap !important;
	
}

.gacha-remaining .num   { 
	font-size:1.1rem; 
	font-weight:700; 
	line-height:1; 
}

/* WooCommerce クーポンリンクを下線付きにする */
.woocommerce-form-coupon-toggle a.showcoupon {
  text-decoration: underline !important;
}
/* 一括売却選択ボタンだけ色を変更 */
#bulk-sale-select {
  background-color: #ff4d4f !important;  /* 好きな背景色に */
  color:            #ffffff !important;  /* 文字色 */
  border-color:     #ff4d4f !important;  /* 枠線がある場合は同色で */
}
.status-filter{
	margin-bottom:13px;
}

@media(max-width:360px){
	.remaining-content {
    min-width: 55%;
    padding: 5px;
	}
	.gacha-item{
		width: 100%;
    margin-bottom: 20px;
    padding: 0px;
  }
	.gacha-remaining .label { 
	font-size:.75rem; 
	font-weight:400; 
	line-height:1;
	white-space: nowrap !important;
	}
	.gacha-remaining .num   { 
		font-size:0.95rem; 
		font-weight:700; 
		line-height:1; 
	}
}

/* 価格+残数（上段）を左右に並べる */
.gacha-meta{
  display:flex;
  flex-wrap:nowrap;           /* ↔ 折り返さない */
  align-items:flex-end;
  column-gap:12px;
  margin-bottom: 4px;

}

/* 左ブロック（価格）は shrink させて右に余白を譲る */
.gacha-price-info{
  flex:0 0 auto;              /* 幅を必要分だけ確保 */
  display:flex;
  align-items:center;
}

/* 右ブロック（残数）は残り幅いっぱい使う */
.remaining-info{
  flex:1 1 auto;              /* 余った幅を全部使う */
  text-align:right;           /* 数字を右寄せ */
  white-space:nowrap;
}

/* ── コインアイコン ─────────────────── */
.gacha-price-info .coin-icon{
  width:25px;                 /* ← 18px 程度で十分 */
  height:25px;
}

.genre-filter-container {
	margin-bottom:20px;
}

/* 480px 以下でジャンルフィルターを横並びにし、広告より上に搬送 */
@media (max-width: 480px) {
  /* ジャンルバーを横並びフレックスに */
  .genre-filter-bar {
    display: flex !important;
    flex-wrap: wrap ;
    justify-content: space-between;
    gap: 8px;
  }

  /* フィルター全体ブロックを広告より前に表示 */
  .genre-filter-container {
    /* 親要素が flex であれば order で位置制御できます */
    order: -1;
    /* もしくは絶対位置指定で上側へ */
    position: relative;
    z-index: 10;
    margin-bottom: 16px; /* 下の広告とのスペース */
  }
	      .genre-btn {
          padding: 8px 10px !important;
          font-size: 10px !important;
          flex: 1;
      }
}
@media (max-width: 360px) {
	.genre-btn {
          padding: 8px 1px !important;
          font-size: 9px !important;
          flex: 1;
      }
}
/* ▼ 670px 以下 ─────────────────────────────── */
@media (max-width: 670px) {
	.woocommerce-cart td.actions {
		display: flex !important;
		flex-wrap: wrap;       /* 折り返し可 */
		justify-content: flex-end;
	}
	/* クーポン入力欄は上段 100% 幅にして余白 */
	.woocommerce-cart td.actions .coupon {
		flex: 1 1 100%;
		margin-bottom: 8px;
	}
}

/* ▼ 400px 以下 ─────────────────────────────── */
@media (max-width: 400px) {
	/* クーポン適用 & カゴ更新ボタンの文字サイズ */
	.woocommerce-cart td.actions .button {
		font-size: 13px !important;
		margin-top: 10px !important;
	}
	  .woocommerce-cart
  .wc-proceed-to-checkout
  >a.checkout-button.button.alt.wc-forward{
      font-size: 13px;
  }
}

/* スライダーなど “バーの高さ分” だけ押し下げたい要素 */
.tcg-top-slider-wrap{
  margin-top: calc(var(--headerH,80px) + 55px) !important;
}
.genre-filter-container{
  position: sticky;                 /* スクロールで吸着 */
  top: var(--headerH,80px);         /* ヘッダー直下に */
  z-index: 9;
  background:#f2f7fc;
  transition: box-shadow .2s;       /* 影のフェード用 */
}

/* 吸着中だけ影＋下線 */
.genre-filter-container.stuck{
  box-shadow: 0 3px 6px rgba(0,0,0,.15);
  border-bottom: 2px solid #1565C0;
}




/* ==============================================================
   (全賞共通) 最後の行を中央寄せにする Flex 設定
   全賞「2列固定」版
============================================================== */

/* 共通：コンテナをFlex化して中央寄せ */
div.prize-images-container.ss-prize-items,
div.prize-images-container.s-prize-items,
div.prize-images-container.a-prize-items,
div.prize-images-container.b-prize-items,
div.prize-images-container.c-prize-items,
div.prize-images-container.d-prize-items,
div.prize-images-container.last-one-prize-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px;
}

/* 共通：子要素を「2列固定」に */
div.prize-images-container.ss-prize-items > .prize-image,
div.prize-images-container.s-prize-items > .prize-image,
div.prize-images-container.a-prize-items > .prize-image,
div.prize-images-container.b-prize-items > .prize-image,
div.prize-images-container.c-prize-items > .prize-image,
div.prize-images-container.d-prize-items > .prize-image,
div.prize-images-container.last-one-prize-items > .prize-image {
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

.prize-image.ss-prize-item img,
.prize-image.s-prize-item img,
.prize-image.a-prize-item img,
.prize-image.b-prize-item img,
.prize-image.c-prize-item img,
.prize-image.d-prize-item img {
  width: 95%;
  height: auto;
  display: block;
}

/* ====== ファースト賞・ハーフ賞（特別枠：1アイテム・大きめ中央） ====== */
div.prize-images-container.first-prize-items,
div.prize-images-container.half-prize-items {
  display: flex !important;
  justify-content: center !important;
  gap: 0;
}
div.prize-images-container.first-prize-items > .prize-image,
div.prize-images-container.half-prize-items > .prize-image {
  flex: 0 0 min(320px, 70%);
  max-width: min(320px, 70%);
}
.prize-image.first-prize-item img,
.prize-image.half-prize-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


/* =======================================================
   page-id-1786 だけ “白文字” を #333 に強制上書き
   （※ ボタン類の文字色はそのまま残す）
======================================================= */

/* 見出し・通常テキスト・表など ——*/
.page-id-1786
.entry-content,
.page-id-1786
.entry-content :where(p, h1, h2, h3, h4, h5, h6, span, li, th, td, label){
  color:#333 !important;
}

/* フォームプレースホルダ・入力値 ——*/
.page-id-1786 input:not([type="submit"])::placeholder,
.page-id-1786 textarea::placeholder,
.page-id-1786 input:not([type="submit"]),
.page-id-1786 textarea{
  color:#333 !important;
}

/* 送信ボタンなど “.button / input[type=submit]” は除外する */

.header-coin-icon{
	width:25px;
	height:25px;
}

.page-id-233 .gacha-remaining{
	display:none;
}
/* デイリーだけバーの上に 10px */
.remaining-bar-wrapper.daily-bar{
    margin-top:20px;
}

/* ───────── 609px 以下 ───────── */
@media (max-width: 609px){
  .mycred-nav-total{
    width: 100% !important;      /* 横幅いっぱいに */
    display: flex !important;    /* フレックス化 */
    justify-content: center !important;  /* 横方向中央寄せ */
    align-items: center !important;      /* 縦方向中央寄せ */
    font-size: 14px !important;  /* 文字サイズ */
  }
}

/* =======================
   2. Base style
======================== */
.btn-resend{
  position:relative;
  display:block;
  width:100%;
  height:48px;
  border:none;
  border-radius:4px;
  background:#1DA1F2;      /* Twilio ブルーに近い色 */
  color:#fff;
  font-weight:600;
  letter-spacing:.5px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease;
}
.btn-resend:hover:not(:disabled){
  background:#0d8ae6;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
}
.btn-resend:disabled{
  background:#b6d4f4;
  cursor:not-allowed;
  box-shadow:none;
}

/* ラベル・カウントダウン・スピナー */
.btn-label, .btn-countdown{display:inline-block;}
.btn-countdown{margin-left:4px;}
.spinner{
  position:absolute;
  right:16px;
  top:50%;
  width:18px; height:18px;
  margin-top:-9px;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .9s linear infinite;
  display:none;            /* 初期は非表示 */
}
@keyframes spin{to{transform:rotate(360deg);}}

.dig_resendotp{
    width: 100%;
    direction: ltr;
    text-align: center;
    margin-top: 4px;
    cursor: pointer;
    text-transform: uppercase;
    display: none;
    margin-bottom: 20px;
    background-color: #ff97986b;
    color: #fff !important;
}

/* =====================
   Ultimate Member Custom Design (v5 - Final Layout)
===================== */

/* 1. 不要な要素（画像、カバー、メタ情報）を非表示 */
.um-profile-photo,
.um-cover,
.um-profile-meta {
  display: none !important;
}

.um-header {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. プロフィール全体のコンテナをカード化 */
.um-profile-body {
  max-width: 600px;
  margin: 40px auto !important;
  /* ボタンが自然に入るので、変なpadding調整は不要 */
  padding: 40px !important;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .um-profile-body {
    padding: 24px !important;
    margin: 20px 16px !important;
    border-radius: 16px;
  }
}

/* 3. 元々の「歯車ボタン」を消す */
.um-profile-edit {
  display: none !important;
}

/* 4. 新しい「プロフィール編集」ボタンエリアのデザイン */

/* ボタンを囲むエリア */
.sunist-edit-footer {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

.um-center{
  margin-top:20px !important;
  margin-bottom: 20px !important;
}

/* ボタン本体のデザイン（詳細度を上げて優先させる） */
/* .um-profile-body を頭につけて優先順位を強化 */
.um-profile-body .sunist-edit-footer .sunist-edit-btn {
  display: inline-block !important; /* flexからblockに変更して安定させる */
  min-width: 240px; /* 画像のように少し幅広に */
  padding: 16px 24px !important;
  
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 4px !important;   /* 丸すぎない、少し角丸の四角 */
  border: none !important;
  
  /* フォント設定 */
  text-decoration: none !important;
  font-weight: 700 !important;
  line-height: 1.2;
  
  /* 動き */
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* ホバー時の挙動 */
.um-profile-body .sunist-edit-footer .sunist-edit-btn:hover {
  background: #1043a0 !important; /* 少し濃い赤へ */
  color: #fff !important;
  transform: translateY(-2px);     /* ふわっと浮く */
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3); /* 赤い影 */
  opacity: 1 !important;
}

/* リンクの下線などを強制的に消す（テーマ対策） */
.um-profile-body .sunist-edit-footer .sunist-edit-btn:visited,
.um-profile-body .sunist-edit-footer .sunist-edit-btn:active,
.um-profile-body .sunist-edit-footer .sunist-edit-btn:focus {
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}

/* body.um-page #content * の !important（特異度0,1,1,1）より高い特異度で上書き */
body.um-page #content .sunist-edit-btn,
body.um-page #content .sunist-edit-btn:hover,
body.um-page #content .sunist-edit-btn:visited,
body.um-page #content .sunist-edit-btn:active,
body.um-page #content .sunist-edit-btn:focus {
  color: #fff !important;
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  text-decoration: none !important;
}

/* UM select2 の下矢印アイコン（Ionicons \f3d0）を非表示 */
.um-field .select2.select2-container .select2-selection .select2-selection__arrow:before,
.um-search-filter .select2.select2-container .select2-selection .select2-selection__arrow:before {
  content: none !important;
  display: none !important;
}


/* 5. 各項目のラベル・入力値のデザイン */
.um-field-label {
  display: block;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1565C0;
  margin-bottom: 6px !important;
  text-transform: uppercase;
  opacity: 0.8;
}

.um-field-value {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  background: #f9f9f9;
  padding: 12px 16px !important;
  border-radius: 8px;
  border: 1px solid #eee;
}
.um-field-value:empty::before {
  content: "-";
  color: #ccc;
}
.um-field {
  padding: 0 0 20px 0 !important;
  border-bottom: none !important;
}
.um-title-text {
  display: none;
}

/* =====================================================================
   WooCommerce ページ全面リデザイン
   ブランドカラー: #1565C0 (ブルー) / #00BCD4 (シアン)
   ===================================================================== */

/* ── 共通: WCページの基盤 ──────────────────────────────────────── */
body.woocommerce-page .site-content,
body.woocommerce .site-content {
  background: #f2f2f7;
}

/* セクション見出し（h2）に左ボーダーアクセント */
body.woocommerce-page h2,
body.woocommerce-page h3 {
  color: #1a1a2e !important;
}

/* ── ショップページ: 商品カード ──────────────────────────────── */
.woocommerce ul.products {
  gap: 20px !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1.5px solid #e8eaf0 !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.06) !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  padding: 0 0 16px !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 28px rgba(21,101,192,0.16), 0 0 0 2px #00BCD4 !important;
  border-color: #00BCD4 !important;
}

/* 商品画像ラッパー */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link img {
  border-radius: 12px 12px 0 0 !important;
  transition: opacity 0.2s !important;
}
.woocommerce ul.products li.product:hover img {
  opacity: 0.92 !important;
}

/* 商品名 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  padding: 12px 14px 4px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* 価格 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: #1565C0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 0 14px 10px !important;
}

/* カートボタン（ショップ一覧） */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  display: block !important;
  margin: 6px 14px 0 !important;
  padding: 10px 0 !important;
  text-align: center !important;
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  transition: opacity 0.18s, transform 0.18s !important;
  box-shadow: 0 2px 8px rgba(21,101,192,0.25) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
  opacity: 0.88 !important;
  transform: scale(1.02) !important;
}

/* ── 商品詳細ページ ─────────────────────────────────────────── */
.woocommerce div.product .product_title {
  color: #1a1a2e !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  border-left: 4px solid #1565C0 !important;
  padding-left: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #1565C0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
  color: #1565C0 !important;
}

/* 数量ボックス */
.woocommerce .quantity .qty {
  border: 1.5px solid #1565C0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
}

/* 単品カートボタン */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 28px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(21,101,192,0.3) !important;
  transition: opacity 0.18s, transform 0.18s !important;
}
.woocommerce div.product form.cart .button:hover {
  opacity: 0.88 !important;
  transform: scale(1.02) !important;
}

/* ── カートページ ───────────────────────────────────────────── */
.woocommerce-cart .woocommerce {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(21,101,192,0.07);
  padding: 24px 28px;
  margin-bottom: 24px;
}

/* カートテーブルヘッダー */
.woocommerce-cart table.shop_table thead tr {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
}
.woocommerce-cart table.shop_table thead th {
  color: #fff !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
  border: none !important;
}
.woocommerce-cart table.shop_table thead th:first-child { border-radius: 10px 0 0 0 !important; }
.woocommerce-cart table.shop_table thead th:last-child  { border-radius: 0 10px 0 0 !important; }

/* カート行 */
.woocommerce-cart table.shop_table tbody tr {
  border-bottom: 1px solid #f0f0f5 !important;
  transition: background 0.15s !important;
}
.woocommerce-cart table.shop_table tbody tr:hover {
  background: #f8f9ff !important;
}
.woocommerce-cart table.shop_table tbody td {
  padding: 16px 16px !important;
  border: none !important;
}

/* 商品名リンク */
.woocommerce-cart table.shop_table .product-name a {
  color: #1565C0 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.woocommerce-cart table.shop_table .product-name a:hover {
  color: #00BCD4 !important;
  text-decoration: underline !important;
}

/* 削除ボタン */
.woocommerce-cart table.shop_table td.product-remove a.remove {
  color: #ff4d4f !important;
  font-size: 22px !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s !important;
}
.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
  background: rgba(255,77,79,0.12) !important;
}

/* カート合計ボックス */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1.5px solid #e8eaf0 !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.07) !important;
  padding: 20px 24px !important;
}
.woocommerce-cart .cart-collaterals .cart_totals > h2 {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: -20px -24px 18px !important;
}
.woocommerce-cart .cart-collaterals .cart_totals table {
  border: none !important;
}
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
  border: none !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f5 !important;
}
.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
  font-weight: 800 !important;
  color: #1565C0 !important;
  font-size: 18px !important;
  border-bottom: none !important;
}

/* チェックアウトボタン */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(21,101,192,0.3) !important;
  transition: opacity 0.18s, transform 0.18s !important;
  letter-spacing: 0.04em !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  opacity: 0.88 !important;
  transform: scale(1.01) !important;
}

/* ── チェックアウトページ ────────────────────────────────────── */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #payment > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1a2e !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, rgba(21,101,192,0.08), rgba(0,188,212,0.06)) !important;
  border-left: 4px solid #1565C0 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* フォーム入力 */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
  border: 1.5px solid #d9dde8 !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  background: #fff !important;
  color: #333 !important;
}
.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus {
  border-color: #1565C0 !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
  outline: none !important;
}

/* 注文内容テーブル */
.woocommerce-checkout table.shop_table {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1.5px solid #e8eaf0 !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.06) !important;
}
.woocommerce-checkout table.shop_table thead th {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  padding: 14px 16px !important;
  border: none !important;
}
.woocommerce-checkout table.shop_table tbody td,
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
  padding: 12px 16px !important;
  border-color: #f0f0f5 !important;
  color: #333 !important;
}
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
  font-weight: 800 !important;
  color: #1565C0 !important;
  font-size: 16px !important;
}

/* 支払い方法ラジオ */
#payment .payment_methods .wc_payment_method label {
  color: #333 !important;
  font-weight: 600 !important;
}

/* 注文確定ボタン */
#place_order,
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(21,101,192,0.3) !important;
  letter-spacing: 0.05em !important;
  width: 100% !important;
  transition: opacity 0.18s, transform 0.18s !important;
}
#place_order:hover {
  opacity: 0.88 !important;
  transform: scale(1.01) !important;
}

/* ── マイアカウントページ ─────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1.5px solid #e8eaf0 !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  background: transparent !important;
  border-bottom: 1px solid #f0f0f5 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 13px 18px !important;
  color: #555 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, padding-left 0.15s !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(21,101,192,0.06) !important;
  color: #1565C0 !important;
  padding-left: 24px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: linear-gradient(135deg, rgba(21,101,192,0.12), rgba(0,188,212,0.08)) !important;
  color: #1565C0 !important;
  border-left: 3px solid #1565C0 !important;
  font-weight: 700 !important;
}

/* マイアカウントコンテンツ */
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1.5px solid #e8eaf0 !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.06) !important;
  padding: 24px !important;
}

/* 注文履歴テーブル */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1.5px solid #e8eaf0 !important;
  box-shadow: 0 2px 8px rgba(21,101,192,0.05) !important;
  width: 100% !important;
}
.woocommerce-account .woocommerce-orders-table thead,
.woocommerce-account table.shop_table thead {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
}
.woocommerce-account .woocommerce-orders-table thead th,
.woocommerce-account table.shop_table thead th {
  color: #fff !important;
  padding: 13px 16px !important;
  border: none !important;
  font-weight: 700 !important;
}
.woocommerce-account .woocommerce-orders-table tbody tr,
.woocommerce-account table.shop_table tbody tr {
  transition: background 0.15s !important;
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover,
.woocommerce-account table.shop_table tbody tr:hover {
  background: #f8f9ff !important;
}
.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account table.shop_table tbody td {
  padding: 12px 16px !important;
  border-color: #f0f0f5 !important;
  color: #444 !important;
}

/* 注文詳細ページへのボタン */
.woocommerce-account .woocommerce-orders-table .woocommerce-button {
  background: linear-gradient(135deg, #1565C0, #00BCD4) !important;
  color: #fff !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: opacity 0.15s !important;
}
.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover {
  opacity: 0.82 !important;
}

/* 住所セクション */
.woocommerce-account .woocommerce-Address {
  background: #f8f9ff !important;
  border-radius: 12px !important;
  border: 1.5px solid #e8eaf0 !important;
  padding: 20px !important;
}
.woocommerce-account .woocommerce-Address-title h3 {
  color: #1565C0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid rgba(21,101,192,0.15) !important;
}

/* ── 注文確認・完了ページ ─────────────────────────────────────── */
.woocommerce-order-details__title,
.woocommerce-column__title {
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, rgba(21,101,192,0.08), rgba(0,188,212,0.05)) !important;
  border-left: 4px solid #1565C0 !important;
  border-radius: 0 8px 8px 0 !important;
  margin-bottom: 14px !important;
}

/* 注文ステータスバッジ */
.woocommerce-order-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(21,101,192,0.1);
  color: #1565C0;
}

/* ── 通知・フラッシュメッセージ ──────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
  position: relative !important;
  background: rgba(21,101,192,0.07) !important;
  border: 1.5px solid rgba(21,101,192,0.25) !important;
  border-top: 4px solid #1565C0 !important;
  border-radius: 0 0 10px 10px !important;
  color: #1a1a2e !important;
  padding: 1em 1.5em 1em 3.5em !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-notice::before {
  position: absolute !important;
  top: 50% !important;
  left: 1em !important;
  transform: translateY(-50%) !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-notice .button {
  background: #1565C0 !important;
  color: #fff !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
}

.woocommerce-error {
  position: relative !important;
  background: rgba(255,77,79,0.07) !important;
  border: 1.5px solid rgba(255,77,79,0.25) !important;
  border-top: 4px solid #ff4d4f !important;
  border-radius: 0 0 10px 10px !important;
  color: #1a1a2e !important;
  padding: 1em 1.5em 1em 3.5em !important;
  list-style: none !important;
}
.woocommerce-error::before {
  position: absolute !important;
  top: 50% !important;
  left: 1em !important;
  transform: translateY(-50%) !important;
}

/* ── レスポンシブ調整 ────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .woocommerce-cart .cart-collaterals .cart_totals {
    padding: 16px !important;
  }
  .woocommerce-cart .cart-collaterals .cart_totals > h2 {
    margin: -16px -16px 14px !important;
    border-radius: 8px 8px 0 0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 16px !important;
  }
  .woocommerce div.product .product_title {
    font-size: 20px !important;
  }
}

/* =====================
   iOS入力ズーム防止 (font-size 16px固定)
===================== */
input, select, textarea,
input[type="text"], input[type="email"],
input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="date"] {
    font-size: 16px !important;
}

/* =====================
   WooCommerceドロップダウン背景色
===================== */
.woocommerce-page select,
.select2-container .select2-selection--single {
    background-color: #f9f9f9 !important;
}

/* =====================
   限定ガチャボタン色（ピンク維持）
===================== */
.gacha-button-daily,
.gacha-limited {
    background: #ec398e !important;
    color: #fff !important;
}

/* =====================
   カートの「購入する」ツールチップは白文字を維持
===================== */
body.woocommerce-page span.ast-card-action-tooltip {
    color: #ffffff !important;
}

/* =====================
   スキップボタン文字色修正
===================== */
@media (min-width: 630px) {
    #skip-button {
        color: #ffffff !important;
        right: 10% !important;
    }
}

/* =====================
   コレクション ページネーション
===================== */
.collection-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 32px;
    flex-wrap: wrap;
}
.collection-pagination select {
    padding: 8px 12px;
    border: 1px solid #1565C0;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    color: #333;
    font-size: 16px !important;
}
.collection-pagination .pag-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #1565C0;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}
.collection-pagination .pag-btn:hover {
    background: #0288D1;
}