/*
Theme Name: Taiwan Original
Theme URI: https://taiwan-card.tw/
Description: 台湾ガチャのオリジナル子テーマ
Template: astra
Author: WebSys
Version: 1.0.0
Text Domain: taiwan-original
*/



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

@media(min-width:720px){
	.gacha-item{
	margin-bottom:30px;
	}
}



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


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


/* ポイントとアカウントアイコンのスタイルを調整 */
.menu-item.points {
  font-size: 16px;
  color: white !important; /* 必要に応じて調整 */
  margin-right: 10px; /* 必要に応じて調整 */
}

.menu-item.account {
  display: flex;
  align-items: center;
}

/* gacha_mainクラスの画像をホバーしたときに拡大する */
#gacha_main {
    overflow: hidden; /* 親要素のサイズを超える部分を隠す */
}
#gacha_main img{
	transition: transform 0.3s ease;
}
#gacha_main img:hover{
	transform:scale(1.1);
}
.gacha_group{
	width:80%;
}




/*トップページ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; 
}

/* Contact Form 7 のボタンの背景色をグラデーションにする */
.wpcf7-form input[type="submit"],
.wpcf7-form input[type="button"] {
    background: #333;
    color: #eee; /* ボタンの文字色を白に設定 */
    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 *:not(.taiwan-header *) :not(.taiwan-drawer *){
    color: white;
}

/* WooCommerceページの文字色設定 */
body.woocommerce-page *:not(.taiwan-header *) :not(.taiwan-drawer *){
    color: #333 ;
}
/* Registerページの文字色を#333に設定 */
body.page-id-59.um-page *:not(.taiwan-header *):not(.taiwan-drawer *) {
    color: #333;
}

/* Loginページの文字色を#333に設定 */
body.page-id-60.um-page *:not(.taiwan-header *):not(.taiwan-drawer *) {
    color: #333 ;
}


/* Ultimate Memberページのボタンスタイル設定 */
body.um-page .um-button, 
body.um-page .um-btn, 
body.um-page input[type="submit"] {
    background: #333!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 .um-field, 
body.um-page .um-field-area, 
body.um-page .um-profile-body {
    padding: 10px !important;
    border-radius: 5px !important;
}

/* Select2の矢印は ::before で出ているので、それを消す */
.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;
}


/* 背景画像設定 */
body {
	background-image: url(https://taiwan-card.tw/wp-content/uploads/2024/12/背景真白.png) !important;
  background-repeat: repeat; /* 画像の繰り返しを防ぐ */
  background-position: center; /* 画像を中央に配置 */
	background-attachment: fixed !important;
}




/*/*ログイン住所選択*/
.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; /* テキストの色を白に設定 */
}



/* プレースホルダーテキストの色変更 */
.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;
}
.gacha-content{
	border-radius: 15px;
}

@media(min-width:550px){
  .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 {
 display: flex;
 flex-direction: column; 
 flex: 1 1 auto;
 height: auto;
}

/*ガチャ画像*/
.gacha-thumbnail {
 flex: 5; 
 text-align: center;
 overflow: hidden;  /* 画像を切り取らない */
}
.gacha-thumbnail img {
  width: 100%; 
  height:auto;
  transition: transform 0.3s ease;
}
.gacha-thumbnail img:hover{
	transform:scale(1.1);
}

.gacha-details {
	flex: 1;
	display: flex;
  background-color: #000;
  flex-direction: column;
}

.gacha-remaining {
  flex: 4; 
  text-align: left;
	display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
	align-items: center;
}

.remaining-content{
	padding: 5px;
}

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

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


.gacha-button {
  flex: 1; 
  text-align: center;
	 display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px 12px;
}

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

.gacha-price-info{
	color:#eee;
	margin-right:2px;
	margin-left:2px;
	font-size:14px;
        white-space: nowrap;
}
/* pt をコイン画像に置き換え */
.gacha-pt-icon{
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-left: -4px;
  transform: translateY(4px);
}

.gacha-remaining{
  display:flex;
  align-items:center;
  gap: 0px;
  flex-wrap: nowrap;
}

/* 価格：縮めない（最優先） */
.gacha-price-info{
  flex: 0 0 auto;       /* 幅は中身に合わせる */
  white-space: nowrap;  /* 折り返し防止 */
  padding: 0 4px;
}

/* 残り：余った枠を全部使う（ここが伸び縮み） */
.remaining-content{
  flex: 1 1 auto;
  min-width: 0;         /* これが超重要：はみ出し防止 */
}

/* バーは枠いっぱい */
.remaining-bar-wrapper{
  width: 100%;
}


/* 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 0;
    z-index: 1000; /* 他の要素の上に表示するための指定 */

}

/* ボタンを横並びにするためのスタイル */
.fixed-footer button {
    margin: 0 10px; /* ボタン間のマージン */
    border: none;
    cursor: pointer;
    border-radius: 25px;
    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 {
       margin: 0px 2px;
       border: none;
       cursor: pointer;
       border-radius: 25px;
       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;
    margin-top: 220px;
    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; /* テキストカラーを黒に設定 */
}

/* 閉じるボタンは無くす */
.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: #ff4d4f !important;
    border: 1px solid #ff4d4f; /* ボーダーを追加 */
}

.modal-button.confirm {
    color: #333 !important;
	  background-color:#ffcd57 !important;
}

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

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

/* テキストのスタイル */
.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: center; /* 子要素の内部を中央揃えにする */
   /* 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;
}



/*結果画面にも同じデザイン　ガチャ詳細ページ*/
#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: 80px;
    margin-bottom: 60px;
}

@media(max-width:550px){
	.prize-rank-image img {
        margin-top: 60px;
        margin-bottom: 30px;
	}
}
@media(max-width:380px){
	.prize-rank-image img {
        margin-top: 50px;
        margin-bottom: 20px;
	}
}

/* 
  2) S賞 
  - 2列表示
  - 商品画像もっとも大きい 
*/
.s-prize-section .s-prize-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}
.prize-image.s-prize-item{
	display: flex;
  justify-content: center;
	width:90%;
}
.s-prize-section .s-prize-item img {
  padding: 5px;
  height: auto;
}

/* 
  3) A賞 
  - 3列表示
  - S賞より少し小さめ 
*/
.a-prize-section .a-prize-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.a-prize-section .a-prize-item img {
  height: auto;
}
.prize-image.a-prize-item{
	display: flex;
  justify-content: center;
	width:90%;
	padding: 1px;
  margin-top: 4px;
}

/* 
  4) B賞 
  - 3列表示
  - A賞よりさらに小さい
*/
.b-prize-section .b-prize-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.b-prize-section .b-prize-item img {
  height: auto;
}
.prize-image.b-prize-item{
	display: flex;
  justify-content: center;
	width:90%;
	padding: 1px;
}

/* 
  5) C賞
  - 4列表示
  - 最大30枚まで (31枚目以降を非表示)
*/
.c-prize-section >.c-prize-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}
.c-prize-section.c-prize-item img {
  padding: 5px;
  height: auto;
}
.prize-image.c-prize-item{
	width:92%;
	padding: 1px;
}
/* 31枚目以降非表示 */
 .c-prize-section.c-prize-item:nth-child(n+31) {
  display: none !important;
}
.prize-images-container.c-prize-items > .prize-image.c-prize-item:nth-child(n+31) {
  display: none !important;
}


/* 
  6) D賞
  - 4列表示
  - 最大40枚 (41枚目以降を非表示)
*/
.d-prize-section >.d-prize-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}
.d-prize-section.d-prize-item img {
  padding: 5px;
  height: auto;
}
.prize-image.d-prize-item{
	width:92%;
	padding: 1px;
	
}
/* 41枚目以降非表示 */
 .d-prize-section.d-prize-item:nth-child(n+41) {
  display: none !important;
}
.d-prize-images-container.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: #000;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
}
/* ボタンのホバースタイル */
.add-submit-button button:hover {
    opacity: 0.8;
}
.submit-button{
    color: #000;
    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;
}


/* ページ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;
}


/* 以下フッター */


/*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: #f0f0f0; /* 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 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for 3D effect */
}

/* Hover effect for footer links */
ul#astra-footer-menu li a:hover {
    background-color: #333; /* Dark background on hover */
    color: #fff !important; /* Light text color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    transform: scale(1.02); /* Slightly enlarge on hover */
}


/* フッターの下部ボーダーのみを非表示にする */
.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 h2,
article#post-493 h2,
article#post-3 h2,
article#post-493 a,
article#post-3 a{
    color: #333 ; /* 任意の黒系の色 */
}



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

/* ホバー効果 */
button.text-link:hover {
    background-color: #333; /* ホバー時の暗い背景 */
    color: #fff; /* ホバー時の明るい文字色 */
    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;
    color: #333;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
	font-size:18px;
	}
}
@media(max-width:595px){
button.text-link {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 6px;
    color: #333;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    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;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
	font-size:12px;
	}
}

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





body.um-page *:not(.taiwan-header *):not(.taiwan-drawer *){
   color: #333 !important;
}
a.real_url[href="https://taiwan-card.tw/mypage-kari/"] {
    display: none !important;
}
/* UM プロフィール更新ボタンの文字色を白に固定 */
body.um-page .um input[type="submit"].um-button,
body.um-page .um a.um-button,
body.um-page .um button.um-button{
  color: #fff !important;
}

/* プロフィール編集ボタンの文字色を白で固定 */
body.um-page .um-profile-body .gachasni-edit-footer a.gachasni-edit-btn{
  color: #fff !important;
}


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


/*ガチャ演出*/
@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: nowrap;
    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: nowrap;
        flex-direction: row;
        justify-content: space-between;
        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;
    margin-bottom: 10px;
    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;
    }
}


.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 {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 4px 7px !important;
    border-radius: 3px;
    font-size: 20px !important;
    font-weight: bold;
    color: #333;
  }
}

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

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

/* 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:       8px 10px !important;  /* 縦横余白を増やして大きめに */
  font-size:     1.05rem !important;
  border-radius: 999px  !important;     /* pill 型 */
}

@media(max-width:700px) and (min-width:550px){
  /* 既存のボタン共通スタイル（大きさ・丸みなど） */
  .gacha-button-single,
  .gacha-button-multi.gacha-10,
  .gacha-button-multi.gacha-100 {
    font-size: 0.8rem !important;
  }

}
@media(max-width:550px){
  /* 既存のボタン共通スタイル（大きさ・丸みなど） */
  .gacha-button-single,
  .gacha-button-multi.gacha-10,
  .gacha-button-multi.gacha-100 {
    font-size: 0.85rem !important;
  }

}


/* ガチャボタン色1回ガチャる：黒×白（白枠） */
.gacha-button .gacha-button-single,
.fixed-footer .gacha-1{
  background:#000 !important;
  color:#fff !important;
  border:2px solid #fff !important;
}


/* ===============================
   【案B】Black / Gold / Red
   =============================== */

/* 10回：ゴールド（発光ちょい足し） */
.gacha-button .gacha-button-multi.gacha-10,
.fixed-footer .gacha-10{
  background-color:#F6D84A !important;
  border-color:#F6D84A !important;
  color:#000 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18), 0 0 18px rgb(246 216 74 / 89%) !important;
}

/* 100回：深め赤（強いアクション） */
.gacha-button .gacha-button-multi.gacha-100,
.fixed-footer .gacha-100,
.fixed-footer .infi-gacha-button.gacha-100{
  background-color:#ff0606 !important;
  border-color:#D84A4A !important;
  color:#fff !important;
}

/* 無料/限定：ゴールド寄せ */
.gacha-button-daily,
.gacha-limited,
.gacha-button-daily-paid{
  background-color:#F6D84A !important;
  border-color:#F6D84A !important;
  color:#222 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18), 0 0 18px rgb(246 216 74 / 89%) !important;
}


/* =========================================
   Gacha Buttons show: Shine + Glow (color keep)
   - 背景色はそのまま
   - その上に艶と光筋を重ねる
========================================= */

/* 対象ボタン（通常表示＋fixed-footer両対応） */
.gacha-button .gacha-button-single,
.gacha-button .gacha-button-multi.gacha-10,
.gacha-button .gacha-button-multi.gacha-100,
.gacha-button .gacha-button-daily,
.gacha-button .gacha-button-daily-paid,
.gacha-button .gacha-limited,
.fixed-footer .gacha-1,
.fixed-footer .gacha-10,
.fixed-footer .gacha-100,
.fixed-footer .gacha-button-daily,
.fixed-footer .gacha-button-daily-paid,
.fixed-footer .gacha-limited,
.fixed-footer .infi-gacha-button{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform, box-shadow;
}

/* 1) ツヤ（上のハイライト） */
.gacha-button .gacha-button-single::before,
.gacha-button .gacha-button-multi.gacha-10::before,
.gacha-button .gacha-button-multi.gacha-100::before,
.gacha-button .gacha-button-daily::before,
.gacha-button .gacha-button-daily-paid::before,
.gacha-button .gacha-limited::before,
.fixed-footer .gacha-1::before,
.fixed-footer .gacha-10::before,
.fixed-footer .gacha-100::before,
.fixed-footer .gacha-button-daily::before,
.fixed-footer .gacha-button-daily-paid::before,
.fixed-footer .gacha-limited::before,
.fixed-footer .infi-gacha-button::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.12) 32%,
    rgba(255,255,255,0) 62%);
  pointer-events:none;
  opacity: .85;
}

/* 2) 光筋（斜めのシャキーン） */
.gacha-button .gacha-button-single::after,
.gacha-button .gacha-button-multi.gacha-10::after,
.gacha-button .gacha-button-multi.gacha-100::after,
.gacha-button .gacha-button-daily::after,
.gacha-button .gacha-button-daily-paid::after,
.gacha-button .gacha-limited::after,
.fixed-footer .gacha-1::after,
.fixed-footer .gacha-10::after,
.fixed-footer .gacha-100::after,
.fixed-footer .gacha-button-daily::after,
.fixed-footer .gacha-button-daily-paid::after,
.fixed-footer .gacha-limited::after,
.fixed-footer .infi-gacha-button::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-45%;
  width: 42%;
  height: 220%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.40) 50%,
    rgba(255,255,255,0) 100%);
  transform: rotate(25deg);
  opacity: 0;
  pointer-events:none;
}

/* hoverで光筋が走る（豪華感） */
.gacha-button .gacha-button-single:hover::after,
.gacha-button .gacha-button-multi.gacha-10:hover::after,
.gacha-button .gacha-button-multi.gacha-100:hover::after,
.gacha-button .gacha-button-daily:hover::after,
.gacha-button .gacha-button-daily-paid:hover::after,
.gacha-button .gacha-limited:hover::after,
.fixed-footer .gacha-1:hover::after,
.fixed-footer .gacha-10:hover::after,
.fixed-footer .gacha-100:hover::after,
.fixed-footer .gacha-button-daily:hover::after,
.fixed-footer .gacha-button-daily-paid:hover::after,
.fixed-footer .gacha-limited:hover::after,
.fixed-footer .infi-gacha-button:hover::after{
  opacity: .95;
  animation: gachaShine 1.0s ease forwards;
}

/* hover時に少し浮かせて“光ってる感” */
.gacha-button .gacha-button-single:hover,
.gacha-button .gacha-button-multi.gacha-10:hover,
.gacha-button .gacha-button-multi.gacha-100:hover,
.gacha-button .gacha-button-daily:hover,
.gacha-button .gacha-button-daily-paid:hover,
.gacha-button .gacha-limited:hover,
.fixed-footer .gacha-1:hover,
.fixed-footer .gacha-10:hover,
.fixed-footer .gacha-100:hover,
.fixed-footer .gacha-button-daily:hover,
.fixed-footer .gacha-button-daily-paid:hover,
.fixed-footer .gacha-limited:hover,
.fixed-footer .infi-gacha-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

@keyframes gachaShine{
  from { left:-45%; }
  to   { left:120%; }
}

/* 動きを減らす設定の人にはアニメOFF */
@media (prefers-reduced-motion: reduce){
  .gacha-button .gacha-button-single::after,
  .gacha-button .gacha-button-multi.gacha-10::after,
  .gacha-button .gacha-button-multi.gacha-100::after,
  .gacha-button .gacha-button-daily::after,
  .gacha-button .gacha-button-daily-paid::after,
  .gacha-button .gacha-limited::after,
  .fixed-footer .gacha-1::after,
  .fixed-footer .gacha-10::after,
  .fixed-footer .gacha-100::after,
  .fixed-footer .gacha-button-daily::after,
  .fixed-footer .gacha-button-daily-paid::after,
  .fixed-footer .gacha-limited::after,
  .fixed-footer .infi-gacha-button::after{
    animation:none !important;
  }
}

/* ===== 100回だけ豪華に（強め） ===== */
.gacha-button .gacha-button-multi.gacha-100,
.fixed-footer .gacha-100,
.fixed-footer .infi-gacha-button.gacha-100{
  /* 外側の光（控えめ→しっかり） */
  box-shadow: 0 13px 19px rgba(0, 0, 0, .28), 0 0 10px #ff0003 !important
}

/* ツヤ（上のハイライト）を強める */
.gacha-button .gacha-button-multi.gacha-100::before,
.fixed-footer .gacha-100::before,
.fixed-footer .infi-gacha-button.gacha-100::before{
  opacity: 1 !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.22) 35%,
    rgba(255,255,255,0) 70%) !important;
}

/* 光筋を少し太く・濃く */
.gacha-button .gacha-button-multi.gacha-100::after,
.fixed-footer .gacha-100::after,
.fixed-footer .infi-gacha-button.gacha-100::after{
  width: 52% !important;
  opacity: 0; /* hoverで出る */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 100%) !important;
}


/* ガチャボタン：楷書寄りフォント */
.gacha-button button,
.fixed-footer button,
.gacha-button .infi-gacha-button,
.fixed-footer .infi-gacha-button{
  font-family: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
  font-weight: 400 !important;
  letter-spacing: .06em;
}

/*全体のフォントも変更しとく*/
body, button, input, select, textarea, .ast-button, .ast-custom-button, h1, h2, h3, h4, h5, h6, .entry-content :where(h1,h2,h3,h4,h5,h6), .site-title, .site-title a{
  font-family: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
}

/* テーマ側の span 等に負けないように */
.gacha-button button *,
.fixed-footer button *{
  font-family: inherit !important;
}

/* 任意：読みやすさアップ（薄い影） */
.gacha-button button,
.fixed-footer button{
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
}




/* コインアイコンなどがある場合の微調整（任意） */
.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) ボタン内の文字をタテヨコ中央寄せ
   ======================================================= */
.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 行になっても詰まり過ぎないように調整 */
}

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

/* 100連（gacha-100）と 無料 1 回ボタンは幅いっぱい */
.fixed-footer .gacha-100,
.fixed-footer .gacha-button-daily,
.fixed-footer .infi-gacha-button.gacha-100 {
  grid-column: 1 / -1;
  width: 100%;
}

/* 共通サイズ調整（まだ入れていなければ） */
.fixed-footer .gacha-1,
.fixed-footer .gacha-10,
.fixed-footer .gacha-100,
.fixed-footer .infi-gacha-button {
  width: 100% !important;
  padding: 5px 10px !important;
  font-size: 1.1rem !important;
  border-radius: 999px !important;
}


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

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

  /* ボタン共通の見た目（丸み・余白など）も合わせておくと統一感アップ*/
  padding: 13px 10px !important;
  font-size: 1.1rem !important;
  border-radius: 999px !important;

  /* 中央寄せ（flex）――まだ入れていなければ */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.gacha-price-info,
.remaining-info {
	display:flex;
	gap:4px;
	align-items:baseline;
}

.label { 
  font-size:.75rem; 
  font-weight:400; 
  line-height:1; 
}
.num   { 
  font-size:1.1rem; 
  font-weight:700; 
  line-height:1; 
  color:#fff;
}
/* 指定ページだけ .remaining-info 内の .num を黒に */
.page-id-233 .num,
.page-id-242 .num,
.page-id-244 .num,
.page-id-1691 .num{
  color: #000;
}


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

  /* 角丸や余白を足したい場合（任意） 
  padding: 8px 16px;
  border-radius: 8px;
  */
}

.flex-nav-prev, .flex-nav-next{
  display: none !important;
}
.flex-control-paging li a{
    width: 7px !important;
    height: 7px !important;
}
.metaslider .flex-control-nav{
  bottom: -22px !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. 新しい「プロフィール編集」ボタンエリアのデザイン */

/* ボタンを囲むエリア */
.gachasni-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 .gachasni-edit-footer .gachasni-edit-btn {
  display: inline-block !important; /* flexからblockに変更して安定させる */
  min-width: 240px; /* 画像のように少し幅広に */
  padding: 16px 24px !important;
  
  /* 色と見た目（画像3枚目を再現） */
  background: #b71c1c !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 .gachasni-edit-footer .gachasni-edit-btn:hover {
  background: #a31515 !important; /* 少し濃い赤へ */
  color: #fff !important;
  transform: translateY(-2px);     /* ふわっと浮く */
  box-shadow: 0 4px 12px rgba(183, 28, 28, 0.3); /* 赤い影 */
  opacity: 1 !important;
}

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


/* 5. 各項目のラベル・入力値のデザイン */
.um-field-label {
  display: block;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #b71c1c;
  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;
}




/* =========================================
   Taiwan Collection Page Design (New)
   ========================================= */

/* ラッパー調整 */
.tw-collection-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
  font-family: "Klee One", "Hiragino Mincho ProN", serif;
}

/* エラーメッセージ */
.tw-collection-error {
  background: #ffebee;
  color: #c62828;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #ffcdd2;
  text-align: center;
  font-weight: bold;
}

/* 注意書き */
.tw-collection-notice {
  color: #e53935;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 15px;
  font-weight: bold;
}

/* --- タブ風フィルター --- */
.tw-collection-tabs {
  margin-bottom: 20px;
  overflow-x: auto; /* スマホで横スクロール */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tw-tabs-scroll {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: 5px;
}
.tw-tab {
  display: inline-block;
  padding: 10px 24px;
  background: #f5f5f5;
  color: #666;
  text-decoration: none;
  border-radius: 99px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
}
.tw-tab.active {
  background: #b71c1c; /* 台湾レッド */
  color: #fff;
  border-color: #b71c1c;
  box-shadow: 0 4px 10px rgba(183, 28, 28, 0.3);
}
.tw-tab:hover:not(.active) {
  background: #e0e0e0;
  color: #333;
}

/* --- ツールバー（ソート・一括選択） --- */
.tw-collection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #eee;
}
.tw-sort-links {
  font-size: 0.9rem;
  color: #333;
}
.tw-sort-links .label {
  margin-right: 8px;
  font-weight: bold;
}
.tw-sort-links a {
  color: #888;
  text-decoration: none;
  margin-right: 10px;
  transition: color 0.2s;
}
.tw-sort-links a.active {
  color: #b71c1c;
  font-weight: bold;
  border-bottom: 2px solid #b71c1c;
}
.tw-btn-bulk-select {
  background: #333;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}
.tw-btn-bulk-select:hover {
  opacity: 0.8;
}

/* --- カードグリッドレイアウト --- */
.tw-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* レスポンシブ */
  gap: 16px;
  margin-bottom: 60px; /* フッターボタン分の余白 */
}

/* カード本体 */
.tw-card-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
.tw-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 画像エリア */
.tw-card-thumb {
  position: relative;
  background: #fafafa;
  padding-top: 100%; /* 正方形を維持 */
  width: 100%;
}
.tw-card-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 画像エリアの調整（全体表示用） --- */
.tw-card-thumb {
  position: relative;
  /* ↓ 背景色を薄いグレーから白に変更し、本体となじませる */
  background: #ffffff; 
  padding-top: 100%; /* 正方形を維持 */
  width: 100%;
  /* ↓ 枠線をなくしてスッキリさせる（お好みで） */
  /* border-bottom: 1px solid #eee; を削除 */
}

.tw-card-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* ↓ 全体を表示 */
  object-fit: contain !important; 
  /* ↓ 余白を少し調整 */
  padding: 2px;
}

/* レアリティバッジ */
.tw-rarity-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #ffd700, #fdd835); /* ゴールド */
  color: #333;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 情報エリア */
.tw-card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
h2.wp-block-heading{
  color:#000 !important;
}
.tw-card-title {
  font-size: 0.9rem !important;
  margin: 0 0 8px 0;
  color: #333 !important;
  line-height: 1.4;
  height: 2.8em; /* 2行制限 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tw-card-price {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #b71c1c;
}
.tw-card-price img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  margin-top: -2px;
}

/* アクションボタン（ラジオボタン） */
.tw-card-actions {
  margin-top: auto; /* 下部に固定 */
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 6px;
}
.tw-radio-group {
  flex: 1;
  position: relative;
}
/* 本来のラジオボタンは隠す */
.tw-radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

/* ラベル（ボタンの見た目） */
.tw-btn-radio {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px 2px;
  font-size: 0.75rem;
  border-radius: 4px;
  background: transparent;
  color: #888;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

/* 選択時のスタイル */
.tw-radio-group input:checked + .tw-btn-radio.keep {
  background: #fff;
  color: #1976d2; /* 青 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tw-radio-group input:checked + .tw-btn-radio.ship {
  background: #fff;
  color: #388e3c; /* 緑 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tw-radio-group input:checked + .tw-btn-radio.sell {
  background: #fff;
  color: #d32f2f; /* 赤 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 売却不可 */
.tw-radio-group.disabled {
  flex: 1;
}
.tw-btn-disabled {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px 2px;
  font-size: 0.7rem;
  color: #ccc;
  background: #eee;
  border-radius: 4px;
}

/* ステータス表示（発送済タブなど） */
.tw-card-status {
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-top: auto;
}
.status-unshipped { background: #e3f2fd; color: #1976d2; }
.status-shipped { background: #e8f5e9; color: #388e3c; }
.status-sold { background: #ffebee; color: #d32f2f; }

/* --- 固定フッター（確定ボタン） --- */
.tw-fixed-footer-spacer {
  height: 80px; /* フッターの裏に隠れないための余白 */
}
.tw-fixed-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #ddd;
  padding: 15px;
  display: flex;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(5px);
}
.tw-btn-submit {
  background: linear-gradient(135deg, #b71c1c, #d32f2f);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 12px 40px;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(183, 28, 28, 0.3);
  cursor: pointer;
  transition: transform 0.2s;
  width: 100%;
  max-width: 400px;
}
.tw-btn-submit:active {
  transform: scale(0.98);
}

/* --- タブの文字色（紫になるのを防止） --- */

/* 通常・訪問済み・クリック時すべて色を統一 */
a.tw-tab,
a.tw-tab:visited,
a.tw-tab:active,
a.tw-tab:focus {
  color: #444 !important; /* シンプルな黒（濃いグレー） */
  text-decoration: none !important; /* 下線を消す */
  outline: none !important; /* クリック時の枠線を消す */
}

/* 選択中（赤背景）の時だけは白文字にする */
a.tw-tab.active,
a.tw-tab.active:visited,
a.tw-tab.active:active,
a.tw-tab.active:focus {
  color: #fff !important;
}

/* マウスを乗せた時は少し黒くする */
a.tw-tab:hover:not(.active) {
  color: #000 !important;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 600px) {
  .tw-collection-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 10px;
  }
  .tw-tab {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  .tw-card-body {
    padding: 8px;
  }
  .tw-card-title {
    font-size: 0.8rem;
  }
  .tw-btn-radio {
    font-size: 0.7rem;
  }
}