/*
Theme Name:Astra child
Theme URI:https://wpastra.com/
Description:WordPressテーマ「Astra」の自作子テーマです。
Template:astra
Author:Brainstorm Force
Author URI:https://wpastra.com/about/?
Version:4.6.11
*/

/* メインページのトップにマージンを追加 */
main {
    margin-top:80px;
}
.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;
	}
}
.custom-logo {
    overflow: hidden; /* 画像の余分な部分を隠す */
    width: 100px; /* 必要に応じてサイズを調整 */
    height: 100px; /* 必要に応じてサイズを調整 */
    object-fit: cover; /* 画像を中央に収める */
}


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

/*ヘッダーのパディング*/
#masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 45px;
}

/*ヘッダー背景白に*/
.ast-desktop .ast-primary-header-bar.main-header-bar, .ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar{
	margin:0px;
	background:#fff !important;
}

/*ヘッダーメニュー*/
.main-header-menu .menu-item, #astra-footer-menu .menu-item, .main-header-bar .ast-masthead-custom-menu-items{
 flex-direction: row;
 align-items: center;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 font-weight: 550;
}

.site-branding.ast-site-identity {
	padding-top:0px;
}
/*アカウント・下やじるし色*/
.ast-theme-transparent-header .ast-builder-menu .main-header-menu, .ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-link, .ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .menu-item > .menu-link, .ast-theme-transparent-header .ast-masthead-custom-menu-items, .ast-theme-transparent-header .ast-masthead-custom-menu-items a, .ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item > .ast-menu-toggle, .ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item > .ast-menu-toggle, .ast-theme-transparent-header .main-header-menu .menu-link{
	color:#333 !important;
	align-items:center;
}

/* ───────────────────────────────
   所有 pt メニューだけ白に上書き
──────────────────────────────── */
li#menu-item-2063 > a.menu-link{
  color: #ffffff !important;     /* 通常状態を白 */
}

li#menu-item-2063 > a.menu-link:hover,
li#menu-item-2063 > a.menu-link:focus,
li#menu-item-2063.current-menu-item > a.menu-link{
  color: #ffffff !important;     /* ホバー／アクティブも白 */
}


/* =====================================================
   デスクトップ：サイトヘッダー
   ===================================================== */
header.site-header {
  position: relative;               /* 擬似要素の基準 */
  z-index: 100;                    /* 上位に */
  overflow: visible !important;     /* 親の hidden を打ち消し */
  /* === 好みでどちらか片方 === */
  box-shadow: 0 3px 8px rgba(0,0,0,.15) !important; /* 影 */
  /* border-bottom: 1px solid #dcdcdc !important;      ボーダー */
}

/* =====================================================
   モバイル：Astra モバイルヘッダーラッパ
   ===================================================== */
#ast-mobile-header.ast-mobile-header-wrap {
  position: relative;
  z-index: 1000;
  overflow: visible !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.15) !important; /* 影 */
  /* border-bottom: 1px solid #dcdcdc !important;     ボーダー */
}

/* ── 影をもっと薄くしたい場合は .08〜.10 程度に下げる ── */
/* ── ボーダーにしたい場合は box-shadow をコメントアウト ── */


@media(min-width:921px){
	.main-header-menu.ast-menu-shadow.ast-nav-menu.ast-flex.submenu-with-border.stack-on-mobile{
		margin-bottom:5px;
	}
}


/*ポイント・アカウント横並びに*/
.ast-header-break-point .main-navigation .stack-on-mobile li {
  width: 50%;
}
/*アイコンの所有ポイントの部分の横幅*/
@media(max-width:500px) {
   .ast-header-break-point .main-navigation .stack-on-mobile li {
     width: 45%;
	}
}

@media (max-width:445px){
   .ast-header-break-point .main-navigation .stack-on-mobile li {
     width: 40%;
	}
}
@media (max-width:413px){
	.ast-header-break-point .main-navigation .stack-on-mobile li {
     width: 50%;
	}
}

.ast-header-break-point .main-navigation ul .menu-item .menu-link{
	border-bottom-width:0px;
	width:auto;
}

/*メニューバーの横幅*/
.main-header-menu .sub-menu {
	width:100%;
}
.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-296{
	width:160px;
}
/*アイコン背景*/
.fa.fa-user{
	width: 55px; /* 要素の幅を設定 */
  height: 55px; 
  border-radius: 50%;
	font-size:30px;
  background-color:#cd2974;
	display: flex; /* 中央揃えのためにflexを使用 */
  align-items: center; /* 縦方向 */
  justify-content: center; /* 横方向 */
  text-align: center; 
  color: #fff; 
  padding: 5px; 
  box-sizing: border-box; /* パディングを含むボックスサイズを設定 */
  margin: 0 auto; 
}

/*ヘッダーポイント背景*/
.menu-item-2063{
	height:40px;
	border-radius: 10px;
	font-size:16px;
	padding:10px;
	background: #0274be !important;
}



.ast-builder-menu-1 .main-header-menu > .menu-item-296 > .sub-menu, .ast-builder-menu-1 .main-header-menu > .menu-item-296 > .astra-full-megamenu-wrapper{
	margin-top:-5px;
}
/* メニューバーの背景と高さ */
.sub-menu li {
	font-size:14px;
  height: 40px;
  line-height: 40px; 
  background: white !important;
}
/* Submenu item hover effect */

.ast-builder-menu .main-navigation>ul {
    align-self: center;
    align-items: center;
}

.sub-menu li:hover {
  background: #eee !important; 
}
.sub-menu a{
	color:#333 !important;
}

.ast-primary-header-bar {
    height: 100px !important;
}

/*Safariの表示*/
@media(min-width:930px){
.ast-flex{
 display: -webkit-inline-box !important; /* inlineではなくflexを使用 */
 align-items: center; /* 垂直方向に中央揃え */
	}
  .ast-builder-grid-row {
  justify-content: space-between; /* 左右に配置 */
  }
	.menu-item-2063{
		margin-top:19px;
	}
  .ast-desktop-header{
		height:80px;
	}
.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
  margin-top: 0px; /* 必要に応じて調整 */
	}
}
.site-header-section{
	height:auto;
}

/* ポイントとアカウントアイコンのスタイルを調整 */
.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%;
}
/*ヘッダーを固定*/
.ast-theme-transparent-header #masthead {
        position: fixed;
        left: 0;
        right: 0;
}



.ast-header-break-point .main-header-menu .sub-menu {
    background-color: #fff;
    position: absolute;
    opacity: 1;
	  visibility: visible;
		font-size:13px;
    height: 40px;
    line-height: 40px; 
}
/* サブメニューの背景色を透明にする */
.ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu,
.ast-builder-menu-1 .main-header-menu > .menu-item > .astra-full-megamenu-wrapper {
    background-color: transparent !important; /* 背景色を透明に設定 */
	width:100%;
}
.ast-header-break-point .main-header-menu{
	background-color:#fff;
}

.ast-builder-menu-1 .sub-menu, .ast-builder-menu-1 .inline-on-mobile .sub-menu{
	border-color:transparent !important;
}

@media (max-width: 920px) {
   .ast-builder-menu-1 .main-header-menu > .menu-item-2063 > .sub-menu, .ast-builder-menu-1 .main-header-menu > .menu-item-2063 > .astra-full-megamenu-wrapper {
	 left:90%;
     transform: translateX(-50%);
     top: calc(100% + 8px);
     min-width: 250px;
  }
	 .ast-builder-menu-1 .main-header-menu > .menu-item-296 > .sub-menu, .ast-builder-menu-296 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
     left: 100%;
     transform: translateX(-50%);
     top: calc(100% + 8px);
     min-width: 330px;
     margin-top: -4px;
    }
	.menu-item-2063{
		font-size:15px;
	}
	.sub-menu li {
	   font-size:10px;
       height: 30px;
       line-height: 30px; 
	}
	.woocommerce-MyAccount-content{
		margin-top:20px;
	}
    .main-header-menu .menu-item, #astra-footer-menu .menu-item, .main-header-bar .ast-masthead-custom-menu-items{
        padding-left:0px;
        padding-right:0px;
	}
}

@media(max-width:850px){
    .main-header-menu .menu-item, #astra-footer-menu .menu-item, .main-header-bar .ast-masthead-custom-menu-items{
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 font-weight: 500;
	}
    .ast-builder-menu-1 .main-header-menu > .menu-item-296 > .sub-menu, .ast-builder-menu-296 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper{
			 margin-top: 4px;
	}
}
/*トグル位置*/
@media(max-width:780px){
	.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle{
		right:13px;
	}
}

@media(max-width:720px){
	main{
		margin-top: 50px;
	}
	.gacha_group{
	    width:100%;
	}
	.main-header-menu .menu-item, #astra-footer-menu .menu-item, .main-header-bar .ast-masthead-custom-menu-items{
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        font-weight: 500;
	}
	.wp-block-cb-carousel.slick-initialized.slick-slider{
	    width:100%;
	}
	.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle{
		right:10px;
	}
  .ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
      padding-right: 0px;
		  padding-left: 10px;
  }
}

@media(max-width:670px){
	.ast-header-break-point .main-navigation ul .menu-item .menu-link {
    border-bottom-width: 0px;
    width: 70px;
	}
		.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle{
		right:8px;
	}
	.ast-header-break-point .main-navigation ul .menu-item .menu-link{
		width:100%;
	}
	.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
      padding-right: 0px;
	padding-left: 0px;
  }
}

@media (max-width: 608px) {
    .ast-mobile-header-wrap .ast-primary-header-bar, .ast-primary-header-bar .site-primary-header-wrap {
        max-height: 80px;
    }
}

@media (max-width: 600px) {
    .wp-block-button .wp-block-button__link, .wp-block-search .wp-block-search__button, body .wp-block-file .wp-block-file__button {
			padding-top: 10px;
      padding-right: 5px;
      padding-bottom: 10px;
      padding-left: 5px;
			font-size:12px;
	}
	.wp-container-core-group-is-layout-8.wp-container-core-group-is-layout-8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
		width:100%;
	}
	.has-text-align-left.gachatext{
	  padding-left:3px;
    padding-right:5px;
		font-size:12px;
		width:50%;
	}
	.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle {
        right: 0px;
    }

}

@media(max-width:565px){
	.ast-header-break-point .main-navigation ul .menu-item .menu-link {
       width: 90%;
    }
	.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar, .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-below-header-bar, .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
    padding-left: 0px;
    padding-right: 0px;
	}
}

@media(max-width:545px){
	main {
    margin-top:40px;
	}
}
@media (min-width: 507px) and (max-width: 608px) {
	.ast-builder-grid-row{
		grid-column-gap:0px;
	}
	/*メニューバー*/
	.ast-builder-menu-1 .main-header-menu > .menu-item-2063 > .sub-menu, .ast-builder-menu-2063 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
    left: 95%;
    transform: translateX(-40%);
    top: calc(100% + 8px);
    min-width: 300px;
	margin-top:0px;
	}
    .ast-builder-menu-1 .main-header-menu > .menu-item-296 > .sub-menu, .ast-builder-menu-296 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 100%;
        transform: translateX(-40%);
        top: calc(100% + 8px);
        min-width: 300px;
	}
	/*メニューバーの文字位置*/
	.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
      padding-right: 0px;
		  padding-left: 10px;
  }
	/*アイコン*/
  .fa.fa-user {
        width: 35px;
        height: 35px;
        font-size: 25px;
        
	}
    .menu-item-2063 {
		font-size:9px;
	}
    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        width: 95%;
    }
	.ast-header-break-point .main-navigation .stack-on-mobile li {
    width: 40%;
	}
    .ast-header-break-point .ast-builder-menu-1 .menu-item-296.menu-item-has-children > .ast-menu-toggle{
				font-size:10px;
	}

	.main-navigation.ast-inline-flex{
		padding-left:100px;
	}
	.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-296{
   width:155px
	}
}
@media(max-width:545px){
	.custom-logo {
    overflow: hidden;
    max-width:70px; /* 必要に応じてサイズを調整 */
    max-height:70px; /* 必要に応じてサイズを調整 */
    object-fit: cover; /* 画像を中央に収める */
}
			header .custom-logo-link img, .ast-header-break-point .site-branding img, .ast-header-break-point .custom-logo-link img{
		max-width:70px ;
		position: relative;
    top: -3px; /* 上に3px移動 */
	}
}
@media(max-width:507px){
	.ast-builder-grid-row{
		grid-column-gap:0px;
	}
	/*メニューバー*/
	.ast-builder-menu-1 .main-header-menu > .menu-item-2063 > .sub-menu, .ast-builder-menu-2063 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
    left: 100%;
    transform: translateX(-40%);
    top: calc(100% + 8px);
    min-width: 300px;
	margin-top:0px;
	}
    .ast-builder-menu-1 .main-header-menu > .menu-item-296 > .sub-menu, .ast-builder-menu-296 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 85%;
        transform: translateX(-40%);
        top: calc(100% + 8px);
        min-width: 300px;
	}
	/*メニューバーの文字位置*/
	.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
      padding-right: 0px;
		  padding-left: 5px;
  }
	/*アイコン*/
  .fa.fa-user {
    width: 30px;
    height: 30px;
	font-size:20px;
	}
    .menu-item-2063 {
		font-size:9px;
	}
    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        width: 95%;
    }
	.ast-header-break-point .main-navigation .stack-on-mobile li {
        width: 50%;
	}
    .ast-header-break-point .ast-builder-menu-1 .menu-item-296.menu-item-has-children > .ast-menu-toggle{
				font-size:10px;

	}

	.main-header-menu .ast-menu-shadow .ast-nav-menu .ast-flex  .submenu-with-border .astra-menu-animation-fade  .stack-on-mobile{
		margin-right:-10px;
	}
}

.ast-builder-grid-row>.site-header-section {
    flex-wrap: nowrap;
}


@media (max-width: 415px) {
	.menu-item .menu-item-type-custom .menu-item-object-custom .current-menu-ancestor .current-menu-parent .menu-item-has-children .menu-item-296 .ast-submenu-expanded{
		min-width:80px;
	}
	.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-296{
		width:80px;
	}
	.ast-builder-menu-1 .main-header-menu > .menu-item-296 > .sub-menu, .ast-builder-menu-296 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
		left:50%;
    transform: translateX(-30%);
    top: calc(100% + 8px);
    min-width: 240px;
	}
		.ast-builder-menu-1 .main-header-menu > .menu-item-2063 > .sub-menu, .ast-builder-menu-2063 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
    left: 80%;
    transform: translateX(-40%);
    top: calc(100% + 8px);
    min-width: 200px;
	}
	.site-header-primary-section-left.site-header-section.ast-flex .site-header-section-left{
		margin-right:-35px;
	}
		/*アイコン*/
  .fa.fa-user {
    width: 30px;
    height: 30px;
	font-size:20px;
		margin-left:10px;
	}

	.main-header-menu .ast-menu-shadow .ast-nav-menu .ast-flex  .submenu-with-border .astra-menu-animation-fade  .stack-on-mobile{
		margin-right:-10px;
	}
	    .ast-header-break-point .ast-builder-menu-1 .menu-item-296.menu-item-has-children > .ast-menu-toggle {
        font-size: 10px;
        right: 0px;
    }
}

/*2063トグルを正確に右に配置*/
@media (max-width: 608px) {
    .menu-item-2063 > button.ast-menu-toggle > span.ast-icon.icon-arrow > svg {
     bottom: -7px !important; /* 垂直方向の位置調整 */
     left: 16px !important; /* 水平方向の位置調整 */

			font-size:10px!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: #04a8d9;
    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 *:not(.site-header *) {
    color: white !important;
}

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

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

/* WooCommerceページのボタンスタイル設定 */
body.woocommerce-page .button, 
body.woocommerce-page .btn, 
body.woocommerce-page input[type="submit"] {
    background: #0274be !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 .site-header,
body.woocommerce-page .site-footer {
    background-color: transparent !important;
}

/* 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: #04a8d9 !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; /* テキストの色を白に設定 */
}



/* プレースホルダーテキストの色変更 */
.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 rgba(0, 0, 0, 0.35); /* ふわっと影 */
  overflow: hidden;                        /* 子要素の角も揃える */
  margin: 0 auto 32px;                     /* カード間の余白（任意） */
  transition: transform .15s;
}


/*ガチャ画像*/
.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;
}

/*ガチャるボタン*/
.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:#444;

}

.gacha-price-info{
	color:#444;
	margin-left:10px;
	font-size:14px;
        white-space: nowrap;
}
@media(min-width:1030px){
	.gacha-price-info{
	    color: #444;
    margin-left: 10px;
    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{
	display: flex;
  padding-left: 12px;
  padding-right:12px;
  justify-content: center;
	color:#444;
}
}
@media(max-width:800px){
	.gacha-price-info{
    font-size: 20px;
    margin-top: 6px;
	}
}
@media(max-width:700px){
	.gacha-list{
		width:98%;
	}
	.remaining-info{
	display: flex;
  padding-left: 7px;
  padding-right:7px;
  justify-content: center;
	color:#444;
		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: #ddd; /* 背景色を指定（必要に応じて変更） */
    padding: 10px 0;
    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;
    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: 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: #fff; /* テキストカラー */
    background-color: #04a8d9; /* ボタンの背景色 */
    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); /* 影をつけて立体感を出す */
}
.page-id-231 .collection-filter a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
    transform: scale(1.01); 
}

@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;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.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;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.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;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		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;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        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;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        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; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影をつけて立体感を出す */
  }
  .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: 110px;
    margin-bottom: 60px;
}

@media(max-width:550px){
	.prize-rank-image img {
        display: inline-block;
        height: auto;
        margin-top: 60px;
        margin-bottom: 30px;
	}
}
@media(max-width:380px){
	.prize-rank-image img {
        display: inline-block;
        height: auto;
        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: #fff !important;
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
	background-color:#ec398e
}
/* ボタンのホバースタイル */
.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;
}


/* 以下フッター */


/*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: #f1fdff; /* 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: #ec398e; /* 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; /* ボタン風のパディング */
    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 {
    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;
    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; /* 必要に応じて相対位置 */
}

/* 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 *:not(.site-header *){
   color: #333 !important;
}
a.real_url[href="https://tcg-clever.com/mypage-kari/"] {
    display: none !important;
}
/*全てのタイトルを小さく*/
@media(max-width:500px){
	.woocommerce-js h2 {
    margin-bottom: .7em;
		margin-left: 5px !important;
		font-size: 33px !important;
	}
}

@media(min-width:200px){
  .ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile {
    display: flex;
    flex-wrap:nowrap;
    justify-content: flex-end;
		
  }
}

/*ガチャ演出*/
@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;
    }
}

.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;
    padding: 4px 7px !important;
    border-radius: 3px;
    font-size: 20px !important;
    font-weight: bold;
  }
}
.item-quantity-badge{
    border: 2px solid #ff4d4f;
    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: #aaa !important;
  border-color:     #e63946 !important;
  color:            #ffffff !important;
}
.gacha-button-multi.gacha-10{
	  background-color: #04a8d9 !important;
  border-color:     #04a8d9  !important;
  color:            #ffffff !important;
}
/* 100連ボタンだけ赤背景（色はお好みで） */
.gacha-button-multi.gacha-100 {
  background-color: #ec398e !important;
  border-color:     #ec398e !important;
  color:            #ffffff !important;
	  font-size: 1.1rem;
}

/* コインアイコンなどがある場合の微調整（任意） */
.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 行になっても詰まり過ぎないように調整 */
}

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

.fixed-footer .gacha-1{
	background-color:#aaa !important;
}
.fixed-footer .gacha-10{
	background-color:#04a8d9 !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;
  width: 100%;
	background-color:#ec398e;
}

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

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

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

@media (max-width: 400px){

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

	/* 10回／100回ガチャ用ボタン（同じ要素に複数クラスが付いている） */
	.gacha-button-multi.gacha-10,
	.gacha-button-multi.gacha-100,
	.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;
}

.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;
          min-width: 55px !important;
      }
}
@media (max-width: 360px) {
	.genre-btn {
          padding: 8px 1px !important;
          font-size: 9px !important;
          flex: 1;
          min-width: 50px !important;
      }
}
/* ▼ 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 #007ad9;
}

.ast-header-break-point .main-navigation ul .menu-item .menu-link
 {
    padding: 0 10px;
    display: flex
;
    width: 100%;
    border: 0;
   
    justify-content: center;
}

/* ──────────────────────────
   所有 pt 表示（ID-2063 のリンク）
   ────────────────────────── */
li#menu-item-2063 > a.menu-link{
  white-space:  nowrap;     /* 強制的に 1 行 */
}
/* デスクトップ（透過ヘッダー時も白） */
.ast-theme-transparent-header
  li#menu-item-2063 > a.menu-link,
.ast-desktop li#menu-item-2063 > a.menu-link{
  color:#ffffff !important;
}

/* ==============================================================
   (全賞共通) 最後の行を中央寄せにする Flex 設定
   既存 Grid を !important で潰すのがポイント
============================================================== */

/* —— S賞 ———————————————————— */
div.prize-images-container.s-prize-items{
  display:flex !important;         /* Grid ➜ Flex に強制切替 */
  flex-wrap:wrap !important;
  justify-content:center !important;  /* ← “余り” を中央寄せ */
  gap: 12px;                       /* 列間スペース（お好みで） */
}
div.prize-images-container.s-prize-items > .prize-image{
  flex:0 0 calc(50% - 12px);       /*   2 列 ＝ 50%   */
  max-width:calc(50% - 12px);
}

/* —— A賞 ———————————————————— */
div.prize-images-container.a-prize-items{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px;
}
div.prize-images-container.a-prize-items > .prize-image{
  flex:0 0 calc(33.333% - 12px);   /*   3 列            */
  max-width:calc(33.333% - 12px);
}

/* —— B賞 ———————————————————— */
div.prize-images-container.b-prize-items{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px;
}
div.prize-images-container.b-prize-items > .prize-image{
  flex:0 0 calc(25% - 12px);
  max-width:calc(25% - 12px);
}

/* —— C・D賞 ——————————————————— */
div.prize-images-container.c-prize-items,
div.prize-images-container.d-prize-items{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px;
}
div.prize-images-container.c-prize-items > .prize-image,
div.prize-images-container.d-prize-items > .prize-image{
  flex:0 0 calc(20% - 12px);       /*   4 列            */
  max-width:calc(20% - 12px);
}

div.prize-images-container.last-one-prize-items{
	  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px;
}
div.prize-images-container.last-one-prize-items > .prize-image{
  flex:0 0 calc(33.333% - 12px);   /*   3 列            */
  max-width:calc(33.333% - 12px);
}

/* =======================================================
   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;
}