@charset "utf-8";

/*
#################################
 
	デザイン書き換え
 
#################################
*/

/*input,select {
  -webkit-appearance: none;
  appearance: none;
}*/


/** {
  outline: 2px solid blue;
}*//*要素のアウトライン表示*/

body{
	background:#ffffff;
	font-family: 'Noto Sans JP', sans-serif !important;
	position: relative;
}

body.is--genre {
    padding-top: 65px;
}


#header{
    border-right: none;
    border-left: none;
	border-bottom: none;/*#ff3300 1px dashed;*/
	z-index: 999;
    max-width: 1024px;
    width: 100vw;
}

#cont{
	padding-bottom:40px;
}

@media screen and (max-width: 480px) {
    body.is--genre {
        padding-top: 35px;
    }
}

.is--genre #cont{
	padding: 15px 0 100px !important;
}

/*ヘッダーロゴ*/
.logo{
	z-index:100;
}

.logo img {
    width: 145%;
    height: auto;
    vertical-align: middle;
    padding: 0 0 0 10px;
}



/*ポイント表示*/
.header-point-number {
    background: #000000;
    color: #FFFFFF;
    border-radius: 30px;
	width:170px;
	padding: 0 0 0 35px;
	    font-size: 1.4rem;
}

.header-point {
	margin-right: 50px;
	width:170px;
}

.header-point-link {
    background: #ff3300;
    border-radius: 50px;
    position: absolute;
    top: 17px;
    right: 65px;
    width: 25px;
    height: 25px;
}
.header-point img {
    height: 25px;
    width: auto;
    position: absolute;
    z-index: 50;
    top: 17px;
    right: 200px;
}



@media screen and (min-width: 280px) and (max-width: 765px) {
	.header-point-link {
		top: 12px;
		right: 45px;
		transform: scale(0.8);
	}
	
	.header-point img {
    top: 12px;
    right: 150px;
    transform: scale(0.9);
}
	.header-point {
	margin-right: 15px;
	}
	.header-point-number {
		width: 170px;
        padding: 0 0 0 35px;
        transform: scale(0.8);
	}
	
	/*コインと＋の位置調整*/
	.header-point-link {
			top: 12px;
			right: 45px;
		}
	.header-point img {
		top: 12px;
		 right: 150px;
		}

}



.pointcount {
    font-size: 1.4rem;
    text-align: end;
    padding: 0 35px 0 0;
}


/*ポイント表示-終*/

.menu-content-btn/*（ヘッダーに表示）ログイン、新規登録ボタン*/ {
    width: 85%;
    justify-content: end;
    margin: 0 0px 0 0;
    position: absolute;
    top: 25%;
    right: 6%;
}

.menu-content-btn a {
	border-radius: 50px;
    width: 12%;
    margin: 0 5px 0 0;
    height: 15%;
    padding: 9px 0;
}


@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
	.menu-content-btn{
		width: 100%;
        transform: scale(0.8);
        top: 18%;
        right: 2%;
    }
	
	.menu-content-btn a {
		    width: 25%;
		font-size: 15px;
	}	
	
	}

@media screen and (min-width: 430px) and (max-width: 768px) /*iP14,iPadmini対応*/{
	.menu-content-btn{
		width: 55%;
        transform: scale(0.8);
        top: 22%;
        right: 3%;	
	}
	
	.menu-content-btn a {
		    width: 25%;
		        font-size: 1rem;
	}	

	}
@media screen and (min-width: 768px) and (max-width: 1024px) /*タブレット対応*/{}



@media screen and (max-width:768px){
	nav{
		width:100%;
		margin:0 auto;
	}
	#cont{
		width:100%;
		margin:0 auto;
		padding: 5px 0 0 0;
	}
	
}


/*ボタン*/
.button{
	margin:0;
	border-radius: 50px;
	color:#000000;
	background-color:#ffffff;
    border: #000000 1px solid;
	padding: 11px 0;
}

.button-02{
	background-color: #000000;
	color:#ffffff;
	width:100%;
	    border: 1px #000000 solid;
}

.button-03{
	margin:0;
	border-radius: 0 50px 50px 0;	
	color:#000000;
	background-color:#ffffff;
    border: #000000 1px solid;
	padding: 7px 0;
	width:100%;
	font-family: 'Noto Sans JP';
	font-size:11px;
	font-weight: bold;
	position: relative;
}
 
/*見出し文字制御*/
h2.h2sub{
	font-size:25px;
}

.thin{
	font-family:'Noto Sans JP', sans-serif;
	font-weight: 100;
}

/*トップページ装飾制御*/

.layout {
    background: #fff;
    border-right: none;
    border-left: none;
	overflow: hidden;
	padding-bottom:0;
    min-height: calc(100vh - 400px);
    height: auto;
}
.dividing-line{
	border: none;
}



/*カテゴリー*/

#oripa .layout{
	overflow: visible;
}

.genre-tab{
	max-width: /*1024px*/100vw;
    width: 100%;
	box-sizing: border-box;
	z-index: 998;
    background: #fff;
    height: 40px;
	display: flex;
    justify-content: center;
	border:none;
	box-shadow: 0 7px 5px -5px rgba(0, 0, 0, 0.2);
	margin: 0 0 9px 0;
	position: sticky;
	top:50px;
}
.genre-tab ul{
	display: flex;
    /*scrollbar-width: none;*/
    padding: 0 0 5px 0;
	justify-content: center;
	width:100%;
	margin: 0 auto;
    overflow-x: scroll;
}

@media screen and (max-width: 768px) {
    .genre-tab ul {
        transform: scale(0.9);
        /*justify-content: space-around;*/
		justify-content: flex-start;
	}    
}

.genre-tab li {
    flex-shrink: 0;
	padding:0 4px;
    height: 30px;
    border-radius: 7px;
    margin: 0 5px;
}


.genre-tab a {
	display: inline-block;
	font-weight: 600;
	line-height: 26px;
    box-sizing: border-box;
    position: relative;
	color: #000000;
    background-color: #FFFFFF;
    /*width: 85px;*/
	width: 115px;
    height: 25px;
    border-radius: 7px;
	text-align: center;
	padding: 0px 0px;
	font-size:15px;
	vertical-align: sub;

}

/*.genre-tab li:nth-child(3) a {
    font-size:10px;
}*/

.genre-tab{
	border-bottom:none;
	text-align: center;
}

.genre-tab a{
	border-right:none;
}

.genre-tab a:hover
/*.genre-tab .active a*/{
	border-bottom:2px dotted #000000;
	border-radius: 0;
	padding-bottom:30px;
}

.sort-tab ul li:hover{
	background-color: #999999;
}
.sort-tab ul a:hover{
	color:#FFFFFF;
}


/*ソート*/

.sort-tab{
	max-width: 1024px;
    width: 100%;
	box-sizing: border-box;
	z-index: 120;
    background: #fff;
    height: 30px;
	display: flex;
    justify-content: center;
}
.sort-tab ul{
	display: flex;
    padding: 6px 0 17px 0;
	justify-content: center;
    width: 70%;
    margin: 0 auto;
}

.sort-tab a:active{
	background-color: #000000;
	color:#FFFFFF;
}
.sort-tab ul li:active{
	/*width:100%;*/
	border-radius:30px;
	background-color:#000000;
}


@media screen and (max-width: 768px) {
	
	.sort-tab {
		max-width: 367px;
	margin:  0 auto;}
    .sort-tab ul {
        width: /*95%*/100%;
		/*transform: scale(0.8)*/
    }
	

}


.sort-tab li {
    flex-shrink: 0;
	padding:0 4px;
	border: 1px solid #000000;
    width: 85px;
    height: 30px;
    border-radius: 30px;
    margin: 0 5px 0 0;

}

.sort-tab li:nth-child(4){
	margin:0;
}

.sort-tab a {
	display: inline-block;
	font-weight: 600;
	line-height: 30px;
    box-sizing: border-box;
    position: relative;
	color: #000000;
    width: 85px;
    height: 30px;
    border-radius: 7px;
	text-align: center;
	padding: 0px 0px;
	font-size:11px;
	vertical-align: middle;

}

@media screen and (max-width: 768px) {
		.sort-tab a {
		display: block;
		text-align: center;
		font-size:75%;
			width: auto;
        height: auto;
	}
}

/*20250110対応*/@media screen and (max-width: 376px) {
		.sort-tab a {
			font-size:62%;
	}
}



.sort-tab img {
    transform: scale(0.5, 0.5);
}

@media screen and (max-width: 768px) {
		.sort-tab li {width:20%;}
}


@media screen and (min-width: 1024px){
	.sort-tab ul{
		padding: 20px 0 17px 0;}
.is--genre #cont {
    padding: 48px 0 100px !important;
}
	
}


/*ハンバーガーメニュー*/
.menu-content {
    height: 28.5rem;
    padding: 20px 20px 20px;
    background-color: rgba(255, 255, 255, .9);
    top: 55px;
}
.menu-content ul{
	width:50%;
	margin:10px auto 0 auto;
}

.menu-content ul a{
	background: transparent;
    color: #000000;
	font-size: 1.3rem;
    line-height: 1.8rem;
}

.menu-content ul li{
	padding-left: 215px;
	    margin-bottom: 20px;
}


#oripa .menu-content {
	top: 55px;
}
#oripa #menu-btn-check:checked ~ .menu-content {
    left: 0;
	top: 55px;
}

/*20250110対応-max数値調整のみ*/@media screen and (min-width: 280px) and (max-width: 767px)/*スマホ対応(iP14・16promax込み-ipadminiサイズ直前まで対応)*/ {
	
	#oripa .menu-content {
	top: 49px;
}
#oripa #menu-btn-check:checked ~ .menu-content {
    left: 0;
	top: 49px;
}


	
	.menu-content{
		height: 24rem;
		padding: 0 20px 20px 20px;
		top: 50px;
	}
	
	.menu-content ul{
	width:90%;
	margin:10px auto 0 0;
}

	.menu-content ul li {
        padding: 10px 0px;
    }
	.menu-content ul a{
        font-size: 1.9rem;
        line-height: 0.3rem;
	}
	
}
@media screen and (min-width:441px) and (max-width: 768px) /*iPadmini対応*/{
	
/*20250110対応-削除	.menu-content {
    height: 35rem;
	}
	.menu-content ul li {
    padding-left: 50px;
}*/
}
/*20250110対応-min数値変更*/@media screen and (min-width: 768px) and (max-width: 1000px) /*タブレット対応*/{
	
		.menu-content {
    height: 37rem;
	}
	
	.menu-content ul li {
    padding-left: 60px;
}
}



@media screen and (min-width: 280px) and (max-width: 435px)/*スマホ対応(iP14込み)*/ {
	
	#oripa .menu-content {
	top: 49px;
}
#oripa #menu-btn-check:checked ~ .menu-content {
    left: 0;
	top: 49px;
}


	
	.menu-content{
		height: 24rem;
		padding: 0 20px 20px 20px;
		top: 50px;
	}
	
	.menu-content ul{
	width:90%;
	margin:10px auto 0 0;
}

	.menu-content ul li {
        padding: 10px 0px;
    }
	.menu-content ul a{
        font-size: 1.9rem;
        line-height: 0.3rem;
	}
	
}


@media screen and (min-width: 1020px) and (max-width: 1500px) /*ipadpro対応*/{
	.menu-content ul li {
		padding-left: 115px;
		margin-bottom: 20px;
	}
	
	.menu-content{
		height:28.5rem;
	}
}

/*//////////獲得一覧・抽選結果共通-ソートアイコン３点//////////////*/


.sort-toolbar {
  width: 100%;
  margin: 0 auto;
  padding-top: 10px;
}

#history .sort-toolbar,
#history_wait .sort-toolbar,
#history_sent .sort-toolbar{
	padding-top:15px;
}

@media screen and (max-width: 429px) {
#history .sort-toolbar,
#history_wait .sort-toolbar,
#history_sent .sort-toolbar{
	padding-top:10px;
}
}

#resultpage .sort-toolbar {
  width: 80%;
}

.sort-toolbar ul {
  display: flex;
  justify-content:space-evenly;
	
}

.sort-toolbar ul li img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.sort-filter {
  width: 90%;
  height: 25px;
	position: relative;
}

.sort-sorting {
  width: 25px;
  height: 25px;
}

.sort-view-1,
.sort-view-2,
.sort-view-3{
  width: 25px;
  height: 25px;
	position: relative;
}

.fil-img, .sor-img, .vie-1-img {
	width:25px;
  height: 25px;
}


.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  width: 150px; 
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
	flex-direction: column;
	width:100%;
}

.dropdown-menu ul li {
  padding: 5px 0 5px 2px;
  cursor: pointer;
  white-space: nowrap;
  display: block; /* 縦並びにするために追加 */
	position: relative;

}

.dropdown-menu ul li a {
    display: block;
}

.dropdown-menu ul li:hover {
  background: #f0f0f0;
}

.dropdown-menu ul li span {
  padding: 0; /* 不要なパディングを削除 */
  margin-left: 2px; /* テキストとの間隔を設定 */
  color: black; /* レ点を黒に設定 */
  font-weight: bold; /* 強調 */
}
.dropdown-menu ul li img{
	width:20px;
	height:20px;
	position: absolute;
    top: 22%;

}

.checkmark {
  display: inline-block;
  color: green; /* チェックマークの色 */
  margin-right: 1px; /* テキストとの間隔 */
  font-weight: bold;
}

.sv-icon .drop-gr {
    padding-left: 17px;
}

.view-menu ul li img {
    padding: 0 1px 0 0;
}


@media screen and (max-width: 429px) {
  .sort-toolbar {
    padding: 0 0 5px 0;
  }
  .sort-filter {
    width: 84%;
  }
  .sort-sorting, .sort-view-1 {
    width: 8%;
  }
	
  .sort-sorting, 
	.sort-view-1,
	.sort-view-2,
	.sort-view-3{
    width: 30px;
	 position: relative;
  }
	
	.sorting-menu,
	.view-menu{
		right:0;
	}
	
	#resultpage .sort-toolbar {
    width: 100%;
}

}

@media screen and (min-width: 430px) and (max-width: 768px) {
	
#resultpage .sort-toolbar {
    width: 100%;
}	
}


@media screen and (min-width: 430px) and (max-width: 767px) {
	
  .sort-sorting, 
	.sort-view-1,
	.sort-view-2,
	.sort-view-3{
    width: 30px;
	 position: relative;
  }
	
	.sorting-menu,
	.view-menu{
		right:0;
	}
	
	#result_send_form{
		padding:10px 0 0 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sort-sorting, 
	.sort-view-1,
	.sort-view-2,
	.sort-view-3{
    width: 30px;
	 position: relative;
  }
	
	.sorting-menu,
	.view-menu{
		right:0;
	}

}

/*表示切替メニューにのみ適用*/
.sv-icon{
	width:/*0210変更144px*/160px;
	right: /*0210変更0*/5px;
}

/*0210追加*/@media screen and (max-width: 429px){
	.sv-icon{
	right: /*0210変更0*/5px;
}
}

/*0210追加*/@media screen and (min-width: 430px) and (max-width: 767px) {
		.sv-icon{
	right: /*0210変更0*/5px;
}

}/*表示切替メニューにのみ適用-ここまで*/



/*共通*/



.menu-btn span, .menu-btn span:before, .menu-btn span:after{
	background-color:#000000;
}
.menu-btn{
	border-left: none;
}

.menu-content .normal-ul{
    width: 50%;
    margin: 20px auto;
    /*padding-left: 180px;*/
}

.menu-content .normal-ul a {
	font-size: 3.2rem;
    background: transparent;
    color: #000000;
	padding: 5px 0 0 0;
	width:100vw;
}

/*20250110対応-max数値変更*/@media screen and (min-width: 280px) and (max-width: 767px)/*スマホ対応*/ {
	.menu-content .normal-ul {
        width: 95%;
        padding: 0;
        margin: 10px auto 0 auto;
				line-height: 3.3rem;
	}
	    .menu-content .normal-ul a {
        font-size: 1.65em;
		padding: 0;
	}/*20250110対応-フォントサイズ変更*/
	
	.normal-ul .thin{
		font-size:1.8rem;
	}
}

@media screen and (min-width: 440px) and (max-width: 760px) /*iP14対応*/{
	
	.login-menu p {
    width: 35%;
		text-align: center;
	}
	/*.menu-content .normal-ul {
        width: 40%;
        padding: 0;
        margin: 10px auto 0 auto;

	}20250107対応-本番で削除*/
	    .menu-content .normal-ul a {
        font-size: 1.65em;
		padding: 0;
	}/*20250110対応-フォントサイズ変更*/

	.menu-content-btn a {
        width: 25%;
        margin: 2px 5px 0 0;
        height: 9px;
        padding: 10px 0;
        font-size: 0.7em;
	}}

/*20250110対応-削除@media screen and (min-width: 440px) and (max-width: 760px){
	
	
	.menu-content .normal-ul {
        width: 95%;
        padding: 0;
        margin: 10px auto 0 auto;
				line-height: 3.3rem;
	}
	
	.menu-content .normal-ul li{
		padding-left:0;
	}

}*/


@media screen and (min-width: 768px) and (max-width: 1000px) /*タブレット対応*/{
	.menu-content ul li {
        padding-left: 75px;
        margin-bottom: 20px;
    }
	    .menu-content {
        height: 27rem;
			padding-top:5px;
    }
	
	.sns{
		padding-top:20px;
	}

}
	.normal-ul .thin{
		font-size:1.8rem;
	}

.sns{
	max-width:1024px;
	width:100%;
	text-align: center;
	display: flex;
	justify-content: center;
	margin: 15px auto 0 auto;
	padding-top:16px;
	border-top: #000000 dashed 1px; 
}

.sns a{
	display: block;
	width:300px;
	color: #000000;
}

.sns a:visited{
	color: #000000;
}

.sns img{
	width: 20px;
	height: auto;
	vertical-align: sub;
}

/*20250110対応max数値変更*/@media screen and (min-width: 280px) and (max-width: 767px)/*スマホ対応*/ {
	
	.sns/*未ログイン時*/{
	margin: 5px auto 0 auto;
        padding-top: 12px;
	}

	.sns-login/*ログイン時のみ*/{
		margin-top: 10px;
        padding-top: 10px;
        font-size: 1.3rem;	
	}
	.sns img {
    width: 12px;
    height: auto;
		vertical-align: baseline;
}
}


@media screen and (min-width: 768px) and (max-width: 1000px) /*タブレット対応*/{
	.sns{
        padding-top: 15px;
        margin-top: 20px;	}
}

@media screen and (min-width: 1020px) and (max-width: 1500px) /*ipadpro対応*/{
	.sns{
		    padding-top: 13px;
	}
}



/*未ログイン時のみ*/
.normal-menu{
	max-width:1024px;
	width:100%;
    height: 50px;
	margin:0 auto;
}

.normal-back{
	background-color:#FFFFFF;
	width:100vw;
	height:50px;
	position:absolute;
	top:0;
	left:0;
}

.n-m-content {
    margin-top: 50px;
    padding-top: 10px;
}




/*ログイン時のみ*/



.l-m-content{
	height: 39rem;
	color:#000000;
	top:60px;
}

.login-menu{
	max-width:1024px;
	width:100%;
    height: 70px;
	margin:0 auto;
	border-bottom: #000000 dashed 1px;
}
.login-menu div{
	width:100%;
	display:flex;
	margin:0 auto;
	justify-content: center;
}

#login-ul{
	max-width:1024px;
	width:40%;
	height:70px;
	display: flex;
	justify-content: center;
}

#login-ul p{
	width:105px;
    margin: 5px auto 0 auto;
	font-weight:200;
}

#login-ul p a{
	display: block;
	color:#000000;
}

#login-ul p a::visited{
	color:#000000;
}

#login-ul li{
	width:35%;
	margin-bottom:5px;
	text-align: center;
	padding-left:0;
}

#login-ul li a{
	padding:0;
}

#login-ul li img {
    vertical-align: bottom;
	width:40px;
	height:40px;
}

.login-back{
	background-color:#FFFFFF;
	width:100vw;
	height:105px;
	position:absolute;
	top:-5px;
	left:0;
}

/*20250110-max数値変更*/@media screen and (min-width: 280px) and (max-width: 767px)/*スマホ対応*/ {
	
	
		#login-ul p {
		text-align: center;
		margin:15px auto;
		font-size:13px;
	}
	
	#login-ul li{
		width:90%;
		padding-top:0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) /*iPadmini対応*/{
    .login-back{
		background-color: #FFFFFF;
		width: 100vw;
		height: 79px;
		position: absolute;
		top: 1px;
		left: 0;
	}
}


.menu-logout{
	text-align: center;
}

.menu-logout a,
.menu-logout a :visited{
	color:#000000;
}


@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
	
	.menu-content #login-ul{
		margin:0 auto;
	}
	
	#login-ul div{
		justify-content: space-between;
	}
	
	.l-m-content{
		height:31rem;
	}
	
	.menu-logout{
		font-size:1.3rem;
	}
	.login-back{
		height:8.5rem;
		top:-5px;
	}
	
	.menu-content.l-m-content {
    margin-top: 0;
    padding-top: 10px;
		height: 34rem;
		top:55px;
}

}

@media screen and (min-width: 430px) and (max-width: 760px) /*iP14,iPadmini対応*/{
	#login-ul{
		margin: 0 auto;
		width:90%;
	}
	
	.l-m-content{
	height: 34rem;
    padding-top: 10px;
		top:55px;
}
.login-back{
	height:85px;
	        top: -5px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) /*タブレット対応*/{
    .l-m-content {
        height: 37rem;
        margin-top: 0;
        padding-top: 0;
    }
}
/*ログイン時のみ　ここまで*/


	



/*
#################################
オリパ一覧
#################################
*/

/*///ガチャ///*/

.item-body_info{
	background-color:#ffffff ;
	border:1px solid transparent;
   border-radius: 0 0 20px 20px;
	width:100%;
	height: 80px;
	padding:5px;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
}


.item-list{
	position: relative;
	max-width:367px;
	width:100%;
	box-shadow: 0 10px 5px 0 #cccccc;
    border-radius: 20px;
}

/*20250110対応*/@media screen and  (max-width: 320px) /*CSSpx-320pxまでの端末へ対応*/{
	.item-list{
		transform: scale(0.9);
		margin-bottom: 0;
}
	
	
}

/*20250110対応*/@media screen and  (max-width: 366px) /*CSSpx-367px以下の端末へ対応*/{
	.item-list{
		transform: scale(0.9);
		margin-bottom: 0;
}
}



.remaining{
	color: #000000;
	font-size:9px;
	font-weight: bold;
	text-align: end;
	/*font-family: 'Zen Old Mincho', serif;明朝*/
}

.remaining-number{
	font-size:14px;/*11px;丸ゴ用*/
	font-weight:bolder;/*bold*/
}


/*20250110対応*/@media screen and  (max-width: 376px){
	
	.remaining{
		font-size:6px;
	}
	.remaining-number{
		font-size:9px;
	}
	
	.limitedgacha .item-body_info .item-body_info-right .remaining{
		font-size:6px;
	}
	.limitedgacha .item-body_info .item-body_info-right .remaining-number{
		font-size:9px;
	}
	
}



.point-number{
	color: #000000;
	position: absolute;
	top:-9px;/*-2px;丸ゴ*/
    font-weight: bold;
}

.svg-coin {
    margin-top: 5px;
}/*コイン表示位置*/



/*ガチャボタン*/
.item-list .gacha-button {
    padding: 3px 5px 5px 5px;
    box-sizing: border-box;
}


.gacha-button{
	display:flex;
	flex-wrap:nowrap;
	position:absolute;
	top:295px;
	width:100%;

}

.gacha-button .button {
border-radius: 30px;
	font-size:13px;
}

.fixed-box-body.gacha-button button{
	width:45%;
}

.gacha-button {
	max-width:100%;
    width: 100%;
	margin:0;
	justify-content: space-evenly;
}

.gacha-button form {
    width: 100%;
    display: flex;
    justify-content: end;
	margin:0;
}
.gacha-1,
.gacha-10,
.gacha-n{
	width:30%;
}

.gacha-n{
	display:flex;

}

.gacha-n .button{
  background: linear-gradient(to bottom, #a79426 25%, #f5f273 50%, #a79426 75%);
color: #362700; /* 文字の色 */
  text-shadow: 
    0.5px 0.5px 0 #ffffff,  /* 右下に白い影 */
    -0.5px -0.5px 0 #ffffff, /* 左上に白い影 */
    0.5px -0.5px 0 #ffffff,  /* 右上に白い影 */
    -0.5px 0.5px 0 #ffffff;  /* 左下に白い影 */}


.gacha-n .button:disabled {
    border: #ccc 1px solid;
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
}

/*終了ガチャの表示（SOLDOUT）*/

.soldout p {
    margin: 0 0 70px 0;
}
.soldout{
	border-radius:20px;
	z-index:200;
pointer-events: none;
}

li.item-list.soldgacha {
    pointer-events: none;
}


/*回数ガチャ選択*/

.selecter-gn {
    width: 136%;
    border-radius: 50px 0 0 50px;
    height: 100%;
    text-align: end;
    background-color: #FFFFFF;
    border-top: #000000 1px solid;
    border-bottom: #000000 1px solid;
    border-left: #000000 1px solid;
    border-right: transparent 1px solid;
	color:#000000;
}


/*ガチャ-サムネイル*/
.item-img {
    height: 260px;
	border-radius: 20px 20px 0 0;
}

.item-img a{
	position:absolute;
	top:0;
	left:0;
}


/*ガチャ-テキスト*/

.item-body_info-right,
.item-body_info-left{
	width:50%;
	height: 35px;
/*必要ポイント表示の領域,残り口数の領域*/
}

#total-number {
    position: absolute;
    top: 15px;
    left: 10px;
    width: 95%;
}

.point-number .price{/*必要ポイント数*/
	font-size:/*19px丸ゴ;*/23.5px;
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/

}

/*20250112対応*//*20250110対応*/@media screen and (max-width: 389px) {
	.point-number {
   transform: scale(0.8);
	left: -15px;
	width:130%;
}
}

.point-number .unit{/*「pt」*/
	font-size:13px;
	padding: 5px 0 0 0;
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
}
.point-number .once{/*/「1回」*/
	font-size:13px;
	padding: 5px 0 0 0;
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
}

ul.item-ul {
    justify-content: space-evenly;
	/*PC表示時の整列*/
}

/*残り口数バー*/

progress{
	padding:0;
	border-radius: 15px;
	height:9px;
}

progress::-webkit-progress-bar {
  background-color: #EEEEEE;
		border-radius: 15px;

}
progress::-webkit-progress-value {
  background-color: #33ff33;
	border-radius: 10px
}

progress.full::-webkit-progress-value {
    background-color: #33ff33; /* 緑 */
}

progress.low::-webkit-progress-value {
    background-color: #ffff00; /* 黄色 */
}

progress.empty::-webkit-progress-value {
    background-color: #ff0000; /* 赤 */
}




/*//////////////ランク限定ガチャ背景//////////////*/
/*ビギナー会員*/

.limitedgroup1 .en,
.limitedgroup2 .en,
.limitedgroup3 .en,
.limitedgroup4 .en,
.limitedgroup5 .en,
.limitedgroup6 .en{text-shadow: 0.5px 0.5px 0 #ffffff, -0.5px -0.5px 0 #ffffff, 
	0.5px -0.5px 0 #ffffff, -0.5px 0.5px 0 #ffffff;}

.limitedgroup1 .remaining,
.limitedgroup2 .remaining,
.limitedgroup3 .remaining,
.limitedgroup4 .remaining,
.limitedgroup5 .remaining,
.limitedgroup6 .remaining{text-shadow: 0.5px 0.5px 0 #ffffff, -0.5px -0.5px 0 #ffffff, 
	0.5px -0.5px 0 #ffffff, -0.5px 0.5px 0 #ffffff;}

.limitedgroup1 .tri,
.limitedgroup2 .tri,
.limitedgroup3 .tri,
.limitedgroup4 .tri,
.limitedgroup5 .tri,
.limitedgroup6 .tri{
    position: absolute;
    top: 0;
    left: -1px;
    z-index: 10;
    width: /*256px*/104px;
    height: /*182px*/102px;
}



.limitedgroup1,
.limitedgroup2,
.limitedgroup3,
.limitedgroup4,
.limitedgroup5,
.limitedgroup6{position: relative;
  width: 367px;
  height: 340px;
  overflow: hidden;
  z-index: 1; /* 親要素のz-indexを設定 */
}

/*20250110対応*/@media screen and  (max-width: 320px) /*CSSpx-320pxまでの端末へ対応*/{
	.limitedgroup1,
.limitedgroup2,
.limitedgroup3,
.limitedgroup4,
.limitedgroup5,
.limitedgroup6{
		transform: scale(0.9);
	margin-bottom:0;
}
}

/*20250110対応*/@media screen and (min-width: 321px)  and  (max-width: 366px) /*CSSpx-367px以下の端末へ対応*/{
	.limitedgroup1,
.limitedgroup2,
.limitedgroup3,
.limitedgroup4,
.limitedgroup5,
.limitedgroup6{
		transform: scale(0.9);
	margin-bottom:0;
}
	
	.limitedgroup1 #total-number,
	.limitedgroup2 #total-number,
	.limitedgroup3 #total-number,
	.limitedgroup4 #total-number,
	.limitedgroup5 #total-number,
	.limitedgroup6 #total-number{
		    right: 0;
	}
}



.limitedgroup1::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(153, 255, 153, 0.5),
              inset 0 0 10px rgba(153, 255, 153, 0.4),
              inset 0 0 15px rgba(153, 255, 153, 0.3),
              inset 0 0 20px rgba(153, 255, 153, 0.2); /* ネオン効果を設定 */
  pointer-events: none; /* クリックなどのイベントを無視 */
  z-index: 2; /* imgの上に表示されるように */
}

.limitedgroup2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(153, 102, 51, 0.5),
              inset 0 0 10px rgba(153, 102, 51, 0.4),
              inset 0 0 15px rgba(153, 102, 51, 0.3),
              inset 0 0 20px rgba(153, 102, 51, 0.2); /* ネオン効果を設定 */
  pointer-events: none; /* クリックなどのイベントを無視 */
  z-index: 2; /* imgの上に表示されるように */
}

.limitedgroup3::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8),
              inset 0 0 10px rgba(255, 255, 255, 0.7),
              inset 0 0 15px rgba(255, 255, 255, 0.6),
              inset 0 0 20px rgba(255, 255, 255, 0.4); /* ネオン効果を設定 */
  pointer-events: none; /* クリックなどのイベントを無視 */
  z-index: 2; /* imgの上に表示されるように */
}

.limitedgroup4::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(255, 255, 51, 0.5),
              inset 0 0 10px rgba(255, 255, 51, 0.4),
              inset 0 0 15px rgba(255, 255, 51, 0.3),
              inset 0 0 20px rgba(255, 255, 51, 0.2); /* ネオン効果を設定 */
  pointer-events: none; /* クリックなどのイベントを無視 */
  z-index: 2; /* imgの上に表示されるように */
	font-family: 'Noto Sans JP', sans-serif;
	font-size-adjust: auto
}

.limitedgroup5::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(153, 51, 255, 0.5),
              inset 0 0 10px rgba(153, 51, 255, 0.4),
              inset 0 0 15px rgba(153, 51, 255, 0.3),
              inset 0 0 20px rgba(153, 51, 255, 0.2); /* ネオン効果を設定 */
  pointer-events: none; /* クリックなどのイベントを無視 */
  z-index: 2; /* imgの上に表示されるように */
}

.limitedgroup6::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px rgba(102, 255, 255, 0.5),
              inset 0 0 10px rgba(102, 255, 255, 0.4),
              inset 0 0 15px rgba(102, 255, 255, 0.3),
              inset 0 0 20px rgba(102, 255, 255, 0.2); /* ネオン効果を設定 */
  pointer-events: none; /* クリックなどのイベントを無視 */
  z-index: 2; /*POPとLIMITEDアイコンの重なり順調整*//* imgの上に表示されるように */
}

/*POPとランクアイコンの重なり順調整*/	
.limitedgroup1 .item-img,
.limitedgroup2 .item-img,
.limitedgroup3 .item-img,
.limitedgroup4 .item-img,
.limitedgroup5 .item-img,
.limitedgroup6 .item-img{
	position: relative;
	z-index: 1;
}


/*ランク限定ガチャ背景*/
.limitedgroup1 .item-body_info{
	background-color: #F1FFE4;
	background-repeat: no-repeat;
}

.limitedgroup2 .item-body_info{
	background-color: #ffffcc;
	/*background-repeat: no-repeat;*/
}

.limitedgroup3 .item-body_info{
	background-image: url("../images/limitedback3.svg");
	/*background-repeat: no-repeat;
	width:367px;
	height:80px;*/
}

.limitedgroup4 .item-body_info{
	background-image: url("../images/limitedback4.svg");
	/*background-repeat: no-repeat;*/}
	
.limitedgroup5 .item-body_info{
	background-image: url("../images/limitedback5.svg");
	/*background-repeat: no-repeat;*/}

.limitedgroup6 .item-body_info{
	background-image: url("../images/limitedback6.svg");
	/*background-repeat: no-repeat;*/}


.limitedgroup1 .svg-coin,
.limitedgroup2 .svg-coin,
.limitedgroup3 .svg-coin,
.limitedgroup4 .svg-coin,
.limitedgroup5 .svg-coin,
.limitedgroup6 .svg-coin{
 background-size: contain;
    border-radius: 50%; /* 丸い形にする */
    border: 1px solid white; /* 白いフチ */
}

/*ランク限定ガチャ-対象外表示-〇〇ランク以上対象*/

.limited-1,
.limited-2,
.limited-3,
.limited-4,
.limited-5,
.limited-6{
	border-radius:0 0 20px 20px;
	z-index:200;
	width: 367px;
    height: 81px;
    background-color: rgba(0, 0, 0, 0.8); /* 対象外時-半透明黒の背景色 */
	position: absolute;
    bottom: 0;
    left: 0;
	pointer-events: none;
	display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
}



.limited-1 p,
.limited-2 p,
.limited-3 p,
.limited-4 p,
.limited-5 p,
.limited-6 p{
	color:#FFFFFF;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
    padding-top: 25px;
    font-size: 27px;
	margin: 0; /* 自動余白を削除 */
    padding: 0; /* 不要なパディングも削除 */
}

.limitedgacha .gacha-button {
    pointer-events: none; /* クリックを無効化 */
    opacity: 0.6; /* 見た目で無効化を示す（必要に応じて変更） */
    cursor: not-allowed; /* マウスカーソルを「禁止」アイコンにする */
}

.limitedgroup1::before,
.limitedgroup2::before,
.limitedgroup3::before,
.limitedgroup4::before,
.limitedgroup5::before,
.limitedgroup6::before{
	z-index:210;
}/*動作問題なければlimitedgroup1::before群に記述を纏める*/

.limitedgroup1 .item-link,
.limitedgroup2 .item-link,
.limitedgroup3 .item-link,
.limitedgroup4 .item-link,
.limitedgroup5 .item-link,
.limitedgroup6 .item-link{
	position:relative;
}


.limitedgacha .item-link{
 position: static;
	max-width:367px;
    max-height: 256px;
    height: 256px;
    width: 100%;
   /* overflow: hidden;*/
}

.limitedgacha .item-body_info {
display: flex;
position: absolute; 
    left: 0;
	bottom:0;
	width:367px;
   overflow-y: auto;
    opacity: 1; 
	 pointer-events: none;
	}

/*20250110対応*/@media screen and  (max-width: 376px) /*CSSpx-375px以下の端末へ対応*/{

.limitedgacha .item-body_info {
	position: static; 
	width:100%;

		}


}





/*ランク限定ガチャ-対象外表示-〇〇ランク限定表示*/


/*ランク限定ガチャ背景ここまで*/

/*////////////////////////////////公開期限付きガチャ-期限表示/////////////////////////////////////*/

.limit-a,.limit-b{
	background-color: rgba(0, 0, 0, 0.6);
    max-width: 365px;
    width: 60%;
	max-height:258px;
	height: 13%;
    position: absolute;
    top: 82%;
    left: 50%;
    border-radius: 30px;
    transform: translateX(-50%);
    right: 0;
    margin: 0 auto;
	display: flex;
    align-items: center; 
    justify-content: center;
}

.limit-a{
	color: #FFFFFF;
}

.limit-b{
	color: #ffff00;
}

.limit-a p,
.limit-b p{
	width:90%;
	margin:0 auto;
	text-align: center;
	font-family: "Noto Sans JP";
	padding-bottom: 1px;
}

/*20250110対応*/@media screen and (max-width: 374px) /*横375pxより小さい端末(iPSE以下)で適用*/{
	.limit-a p, .limit-b p{
		width:100%;
		font-size:0.8em;
	}
}


/*////////////////////////////////公開期限付きガチャ-期限表示-ここまで/////////////////////////////////////*/

/*
#################################
ポップアップ
#################################
*/

/*history.html*/

#popup {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
	width:100%;
}

.popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

.popup-overlay .popup-button{
	margin-top:60px;
}


#popup:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.popup-window {
  width: 100%;
  max-width: 260px;
height: 205px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#popup-w-result{
	max-width:310px;
}

.popup-text {
  margin: 0;
}

.popup-text:not(:last-of-type) {
  margin-bottom: 1em;
	padding:15px 0 0 0;
}

.his-return p::after{
	content: "獲得pt/000,000,000pt";
    display: block;
    font-size: 14px;
    color: #000000;
	padding:0;
	width:100%;
	position: absolute;
	bottom:15%;
	left:0;
	text-align:center;
}


.popup-close {
  cursor: pointer;
}

.popup-close svg {
    position: absolute;
    top: 15px;
    right: 15px;
}

.popup-text .ttl-en{
	
	text-align: center;
    width: 90%;
    margin: 0 auto;
}

.his-cont-txt{
	font-family: "Noto Sans JP";
    font-size: 13px;
    font-weight: 100;
    width: 97%;
    margin: 0 auto;
	padding: 0 0 3px 0;
}

.his-return{
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.his-return p{
	width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}
.his-img{
position: absolute;
    top: 240%;
    left: 50%;
	transform: translate(-50%, -50%);}
.his-img img{
    transform: scale(0.4);
    padding-left: 3px;
}

.his-point1 {
    position: absolute;
    /*right: 131px;*/
	font-size: 0.9em;
	left:12px;
}
span.his-point1 img {
    position: absolute;
    top: 2px;
    left: -23px;
}
.his-point2{
    position: absolute;
    /*left: 155px;*/
    font-size: 0.9em;
    color: #FF0000;	
	right:-10px;
}

span.his-point2 img {
    position: absolute;
    top: 2px;
    left: -21px;
}

.his-point1,.his-point2{
	bottom:-165%;
}

.popup-button{
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 90px;
    padding: 3px 0;
    width: 100%;
    margin-top: 60px;
	text-align:center;

}

.popup-button button{
	font-weight:bold;
	font-size:12px;
	font-family: 'Noto Sans JP';
	color:#FFFFFF;
	margin-bottom: 6.7px;
	display: inline-block;
	width:100%;
}

.popup-button input{
	color:#FFFFFF;
}


/*ログインエラー*/
.popup-text-a img{
	width:25%;
	position: absolute;
    top: 50px;
    left: 110px;
}

.ttl-alert{
    font-family: "Noto Sans JP";
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin: 70px auto 0 auto;
    width: 90%;
}

.popup-text-a {
  margin: 0;
}

.popup-text-a:not(:last-of-type) {
  margin-bottom: 1em;
	padding:55px 0 0 0;
}


.popup-button-a{
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 90px;
    padding: 5px 0;
    width: 85%;
    margin: 20px auto 0 auto;
	text-align:center;

}

.popup-button-a button{
	font-weight:bold;
	font-size:12px;
	font-family: 'Noto Sans JP';
}

.popup-button-a input{
	color:#FFFFFF;
}

.popup-button-b{
    border: 1px solid #000000;
	background-color: #FFFFFF;
    color: #000000;
    border-radius: 90px;
    padding: 11px 0;
    margin: 0;
	text-align:center;
	height: 14px;
    width: 100%;
    line-height: 1.5rem;
	display: block;

}

.popup-button-b button{
	font-weight:bold;
	font-size:12px;
	font-family: 'Noto Sans JP';
}

.popup-button-b input{
	color:#000000;
}

#product .his-cont-txt{
	padding:0 0 5px 0;
}








/*//////////ポップアップやり直し*/
/*アラートマーク*/
.popup-inner svg {
    fill: #000000;
}
.popup-img {
    width: 73px;
    margin: 0 auto;
}

.close {
    transform: scale(1.5);
    top: 10px;
    right: 10px;
}
.window{
	width: 260px;
    height: 330px;
	border-radius: 5px;
    background-color: #ffffff;
    border:none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.window-signup{
    height: 300px;}

.popup-inner{
    padding: 30px 20px 0 20px;
    box-sizing: border-box;
}

.popup-title{
	font-size:15px;
}
.popup-txt {
    color: #555555;
    font-size: 11px;
    margin-bottom: 10px;
    font-weight: 500 !important;
    padding-left: 5px;
}


.button-a1{
	width:100%;
	height:15px;
	background-color: #000000;
	color:#FFFFFF;
}

.button-a2{
	width:100%;
	height:15px;
	  cursor: pointer;
}

#history .popup-inner{
	padding: 40px 10px 0 10px;
}

#history .popup-txt{
	margin-bottom:40px;
}

#resultpage .popup-inner{
	padding: 40px 10px 0 10px;
}

#resultpage .popup-txt{
	margin-bottom:40px;
}

/*還元ポップアップ調整*/

#resultpage .his-cont-txt,
#history .his-cont-txt{
	font-family: "Noto Sans JP";
    font-size: 13px;
    font-weight: 100;
    width: 100%;
	letter-spacing: 2px;
	padding: 0 0 3px 0;
}





#resultpage .his-return-title,
#history .his-return-title{
	font-family: "Noto Sans JP";
	font-size:18px;
}

#resultpage .his-return-title p,
#history .his-return-title p{
	width:90%;
	margin:0 auto;
	text-align: center;
}

#resultpage .popup-overlay .popup-button,
#history .popup-overlay .popup-button{
	    margin-top: 35px;
}


#resultpage .popup-text:not(:last-of-type),
#history .popup-text:not(:last-of-type){
	    padding-top:12px;
}

#resultpage .his-point1,
#history .his-point1{
	bottom:-70%;
}

#resultpage .his-point2,
#history .his-point2{
	bottom:-70%;
}


.his-img{
	top:145%;
}





/*還元ポップアップ調整ここまで*/






/*
#################################
ガチャページ
#################################
*/

#product{
	position: relative;
}

#product .cont-body{
	padding:20px 0;
}

#product #footer{
    height: 45rem;
}

.item-detail-img,
.lineup-img{
	text-align: center;
}

.item-detail-img img{
	width:40%;
}
@media screen and (max-width: 768px) {
	.item-detail-img img{
	width:100%;
}
}


.lineup-img img{
	width:38%;
	height:auto;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.lineup-img img{
		width:100%;
	}
}


.gacha-title {
    width: 30%;
    margin: 0 auto;
	    font-family: "Noto Sans JP";
}

@media screen and (max-width: 768px) {
	.gacha-title {
		width: 70%;
	}
}


.title-small{
	font-family: YuMincho, serif;
	font-size:12pt;
	display: flex;
	align-items: center;

}

.title-small:before,
.title-small:after {
  content: "";
  flex-grow: 1;
  height: 0.5px; /* 線の太さ */
  background: #000000; /* 線の色 */
  margin: 0 0.5em; /* 文字と線の余白 */
}
.title-large {
    /*font-family: 'Noto Sans CJK JP';*/
    font-size: 30px;
	width: 96%;
    text-align: center;
	margin: 0 auto 50px auto;
	border-bottom: #000000 1px solid;
	padding: 0 0 15px 0;
}

/*固定メニュー*/


#gacha_fix_field {
   /*max-width: 1024px;*/
    width: 100vw;
  margin-inline: auto;
	background-image: url("../images/gacha-menu-background.png");
	/*background-repeat: no-repeat;*/
    height: 140px;
    z-index: 999;
    position: fixed;
	bottom: -2px;
    right: 0;
    left: 0;
    margin: auto;
}

#gacha_fix {
	max-width:1024px;
	width:100%;
	height: 140px;
	position: fixed;
    bottom: 0;
	right: 0;
	z-index:9999;
}

@media screen and (min-width: 768px) and ( max-width:1024px) {
	#gacha_fix {
	width:40%;
	  right: 0;
	  bottom: -2px;
	  left: 0;
	  margin: auto;
	}
}

@media screen and (min-width: 1024px) and ( max-width:1200px) {
	#gacha_fix {
	width:35%;
	  right: 0;
	  bottom: -2px;
	  left: 0;
	  margin: auto;
	}
}

@media screen and (min-width: 1200px) {
	#gacha_fix {
	width:28%;
	  right: 0;
	  bottom: -2px;
	  left: 0;
	  margin: auto;
	}
}


#product .item-body_info {
    background-color: transparent;
    position: absolute;
	top: 52px;
	
		  right: 0;
	  bottom: 0;
	  left: 0;
	  margin: auto;

}
#product .gacha-button {
    position: absolute;
    top: 92px;
	
		  right: 0;
	  bottom: 0;
	  left: 0;
	  margin: auto;

}
#product .gacha-n{
	height:34px;
}


#product .page-back {
	padding: 0 0 40px 20px;
}

@media screen and (max-width: 768px) {
		#product .page-back {
			padding: 0 0 20px 0;
}
}


.fixedbox-txt{
	font-size:0.7em;
	position: absolute;
    bottom: 8%;
    width: 100%;
    text-align: center;
}
@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
.fixedbox-txt{
    bottom: 10%;
}

}

/*///ラインナップ画像無しページ///*/


/*共通*/
.card-box{
	width:35%;
	margin: 0 auto 20px auto;
}
.sub-title{
	width:35%;
	margin:0 auto;
}

.card-list{
	height:auto;
}

.res-img img {
    max-width: 100%;
    height: auto;
    display: block;
}


@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
	
	/*共通*/
	.card-box{
	width:90%;
	}
	.sub-title{
	width:90%;
	margin:0 auto;
}
}

@media screen and (min-width: 429px) and (max-width: 768px) /*iP14,iPadmini対応*/{
		/*共通*/
	.card-box{
	width:90%;

}
	.sub-title{
	width:90%;
	margin:0 auto;
}
}

.lead{
	border:1px #666666 dashed;
	height:auto;
	padding: 15px;
}

.lead p{
    font-size: 14px;
	font-weight: 500;
	 text-indent: -1em;
  padding-left: 1em;
}



/*大当たり,ラストワン*/

.big img{
	width:100%;
	height: auto;
	display: block;
}


.big-box .card-list{
	/*object-fit: cover;*/
	width: calc(96% / 2);
		height:auto;
	object-fit: cover;

}

/*中当たり、その他*/


.middle-box .card-list,
.endure-box .card-list{
	/*object-fit: cover;*/
	width: calc(91% / 3);
		height:auto;
	object-fit: cover;

}
.middle img,
.endure img{
	width:100%;
	height: auto;
		display: block;


}


/*小当たり*/

.small-box .card-list{
	/*object-fit: cover;*/
	width: calc(92% / 4);
	height:auto;
	object-fit: cover;
}
.small img{
	width:100%;
	height: auto;
		display: block;


}

/*ガチャ詳細-ランク限定ガチャ表示*/

#limitedproduct .lim1 {
	background: linear-gradient(#F1FFE4, #F1FFE4);
	bottom: -53px;
}

#limitedproduct .lim2 {
	background: linear-gradient(#ffffcc, #ffffcc);
	bottom: -53px;
}


#limitedproduct .lim3 {
	background-image:url("../images/limitedback3.svg");
	background-repeat:no-repeat;
	 background-size: 110%;
	bottom: -53px;
}
#limitedproduct .lim4 {
	background-image:url("../images/limitedback4.svg");
	background-repeat:no-repeat;
	 background-size: 110%;
	bottom: -53px;
}

#limitedproduct .lim5 {
	background-image:url("../images/limitedback5.svg");
	background-repeat:no-repeat;
	 background-size: 110%;
	bottom: -53px;
}
#limitedproduct .lim6 {
	background-image:url("../images/limitedback6.svg");
	background-repeat:no-repeat;
	 background-size: 110%;
	bottom: -53px;
}


#limitedproduct .item-body_info{
	background-color:transparent; 
	position: absolute;
    top: 55px;
}

#limitedproduct .gacha-button{
	top: 95px;
}

#limitedproduct .en,
#limitedproduct .remaining{
	text-shadow: 0.5px 0.5px 0 #ffffff, -0.5px -0.5px 0 #ffffff, 0.5px -0.5px 0 #ffffff, -0.5px 0.5px 0 #ffffff;
}


/*ランク外ガチャ表示*/

/*トップ画像＋ランク限定マーク調整*/

/*#limitedproduct .oripa-img {
    width: 40%;
    height: auto; 
    display: block; 
  padding-top: 0; 
	margin: 0 auto;
	position: relative;

}

@media screen and (max-width: 768px) {
    #limitedproduct .oripa-img {
        width: 100%;
    }
}*/

.limsingle-top{
	max-width: 1024px;
    width: 100%;
    height: auto;
    position: absolute;
    top:0;
}

.limsingle-top img {
width: 102px;
    height: 102px;
    position: absolute;
    top: 0;
    left: 30%;}

@media screen and (max-width: 768px)/*768pxまで適用*/{
	.limsingle-top{
    width: 100%;
	    top:10px;

	}
	
	.limsingle-top img {
	position: absolute;
        left: 0;	
	}

}

@media screen and (min-width: 768px) and (max-width: 819px){
	.limsingle-top{
    width: 100%;
	}
	
	.limsingle-top img {
	position: absolute;
        left: 0;	
		width: 204px;
        height: 204px;
	}

}


@media screen and (min-width: 820px) and (max-width: 1025px){
		.limsingle-top{
    width: 100%;
	}
	
	.limsingle-top img {
	position: absolute;
	top:0;
	/*left:306px;*/

	}
}



.excluded{
	border-radius: 0 0 20px 20px;
    z-index: 200;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.excluded p {
    font-size: 3.2rem;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    padding-bottom: 50px;
}

@media (max-width: 320px) {
	.excluded p {font-size: 2.4rem;}

}




#limitedproduct #gacha_fix{
	z-index:199;
}

#limitedproduct .lim1-box,
#limitedproduct .lim2-box,
#limitedproduct .lim3-box,
#limitedproduct .lim4-box,
#limitedproduct .lim5-box,
#limitedproduct .lim6-box{
	position: relative;}

#limitedproduct .lim1-box .limited-tri::before {
    content: "";
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);    
	width: 40%;
    height: 100%;
	box-shadow: 0 0 2px rgba(153, 255, 153, 0.4), 0 0 7px rgba(153, 255, 153, 0.3), 0 0 12px rgba(153, 255, 153, 0.2), 0 0 10px rgba(153, 255, 153, 0.8);
    pointer-events: none;
	margin: 0 auto;

}

#limitedproduct .lim2-box .limited-tri::before {
    content: "";
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);    
	width: 40%;
    height: 100%;
 box-shadow: 0 0 5px rgba(222, 184, 135, 0.8),   
                0 0 10px rgba(222, 184, 135, 0.6),  
                0 0 15px rgba(222, 184, 135, 0.4),  
                0 0 20px rgba(222, 184, 135, 0.2);  
	pointer-events: none;
	margin: 0 auto;
}

#limitedproduct .lim3-box .limited-tri::before {
    content: "";
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);    
	width: 40%;
    height: 100%;
	box-shadow: 0 0 5px rgba(128, 128, 128, 0.8),
                0 0 10px rgba(128, 128, 128, 0.6),
                0 0 15px rgba(128, 128, 128, 0.4),
                0 0 20px rgba(128, 128, 128, 0.2);
	pointer-events: none;
	margin: 0 auto;
}

#limitedproduct .lim4-box .limited-tri::before {
    content: "";
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);    
	width: 40%;
    height: 100%;
box-shadow: 0 0 5px rgba(218, 165, 32, 0.8), 0 0 5px rgba(218, 165, 32, 0.4), 0 0 15px rgba(218, 165, 32, 0.4), 0 0 20px rgba(218, 165, 32, 0.2);
	pointer-events: none;
	margin: 0 auto;
}

#limitedproduct .lim5-box .limited-tri::before {
    content: "";
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);    
	width: 40%;
    height: 100%;
box-shadow: 0 0 5px rgba(255, 0, 255, 0.6), 0 0 3px rgba(255, 0, 255, 0.2), 0 0 8px rgba(255, 0, 255, 0.4), 0 0 13px rgba(255, 0, 255, 0.2);
	pointer-events: none;
	margin: 0 auto;
}

#limitedproduct .lim6-box .limited-tri::before {
    content: "";
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);    
	width: 40%;
    height: 100%;
	box-shadow: 0 0 2px rgba(0, 255, 255, 0.4), 0 0 7px rgba(0, 255, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.2), 0 0 15px rgba(0, 255, 255, 0.1);
	pointer-events: none;
	margin: 0 auto;
}




@media screen and (max-width: 768px) {
	#limitedproduct .lim1-box .limited-tri::before,
	#limitedproduct .lim2-box .limited-tri::before,
	#limitedproduct .lim3-box .limited-tri::before,
	#limitedproduct .lim4-box .limited-tri::before,
	#limitedproduct .lim5-box .limited-tri::before,
	#limitedproduct .lim6-box .limited-tri::before{
		width:100%;
	}
	}

/*ランク外ガチャ表示ここまで*/

/*ガチャ詳細-ランク限定ガチャ表示ここまで*/


/*
#################################
抽選結果
#################################
*/

#resultpage .head-ttl{
	width:80%;
	margin:0 auto;
}

#resultpage #cont{
	position:relative;
	padding-bottom: 50px;
}

@media screen and (max-width:768px){

#resultpage #cont{
		padding-bottom: 15px;

	}
}


.resultpic{
    max-width: 1024px;
    width: 80%;
    margin: 0 auto 150px auto;
}

@media screen and (max-width: 768px) {
	.resultpic {
    width: 100%;
}
}
.resultpic img{
	width:100%;
	height:auto;

	padding: 0 0 30px 0;
}

@media screen and (max-width: 768px) {	
	#resultpage .head-ttl {
		padding: 0 0 13px 5px;
		width:100%;
	}
}




/*
#################################
カード一覧表示
#################################
*/

.cards {
    max-width: 1024px;
    width: 80%;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {	
.cards{
	width:100%;
	justify-content: space-between;
	}}


	
@media screen and (max-width: 768px) {
.cards:after{
    content: "";
    display: block;
    width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
}

.card{
	position: relative;
	border-radius: 5px;

	width:49.5%;
}


/*#################################
カード一覧表示ここまで
#################################*/


.triangle {
    position: relative;
    background: transparent;
    padding: 0;
    text-align:center;
    font-size: 25px;
    font-weight: bold;
}

.triangle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 38px solid #000000;
    border-right: 38px solid transparent;
    border-left: 38px solid transparent;
    border-bottom: 0px solid transparent;
    transform: translateX(-50%) translateY(100%);
}

.twin-button .button{
	width:70%;
	font-family: 'Noto Sans JP', sans-serif;
}




.body-name {
    width: 90%;
    height: 75px;
    line-height: 1.8rem;
    display: flex;
    align-items: end;
    overflow: hidden;
}

.body-return{
	font-size: 0.9rem;
    line-height: 1.3rem;
	color: #FF0000;
}


@media screen and (max-width: 430px) {
	.body-name {
    height: 50px;
}
}
@media screen and (max-width: 768px) {
            .body-name{
				font-size: 1.2rem;
	}
}

@media screen and (min-width:280px) and (max-width:429px){
		.body-name{
			line-height: 1rem;
	}

	.body-name{
		font-size: 0.8rem;
	}
	
	#history #plist-cardslist .body-name,
	#history_wait #plist-cardslist .body-name,
	#history_sent #plist-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.3em;
        height: 58px;
        width: 91%;
	}
	
}
@media screen and (min-width: 430px) and (max-width: 768px) /*iP14,iPadmini対応*/{

	#history #plist-cardslist .body-name,
	#history_wait #plist-cardslist .body-name,
	#history_sent #plist-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.3em;
        height: 58px;
        width: 91%;
	}
	
	#history_wait #plist-cardslist .body-name,
	#history_sent #plist-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.3em;
        height: 58px;
        width: 120%;
	}

	
	

}

.card svg {
		background-color: #FFFFFF;
    border: #666666 1px solid;
    border-radius: 50px;	
	}


@media screen and (max-width: 480px) {
    .card svg {
		transform: scale(0.6);
        right: 0;
		background-color: #FFFFFF;
		
	}
}

@media screen and (max-width: 430px) {
    .card svg {
		transform: scale(0.5);
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
		margin: auto;
	}
}

.card svg{
	fill:transparent;
}

.card-check:checked + svg{
	fill:#AF0000;
	border:none;
}

.card:has(.card-check:checked){
    border: #AF0000 0.5px solid;
	background-color:#FFF9F9;
}

.card-img{
	margin: 0;
}

.card-img img{
	vertical-align: middle;
	/*0250208対応-追加*/border-radius: 3px;
}

.card-body{
	position: absolute;
        bottom: 20px;
        right: -10px;
}


@media screen and (min-width:280px) and (max-width:429px){
	.card-body{
	position: absolute;
        bottom: 10px;
        right: 0;
}
	#history_sent .card-body{
		height:50px;
        bottom: 15px;
}
	

}

@media screen and (min-width: 430px) and (max-width: 768px) /*iP14,iPadmini対応*/{
	    #history_sent .card-body {
			bottom: 15px;}
}


/*/////////////////////////////////カードリスト表示切替（対象：抽選結果・獲得一覧）//////////////////////////////////////*/

/*画像付きリスト*/
#plist-cardslist .card {
	width: 100%;
}

#plist-cardslist .card-img {
    width: 140px;
}

#plist-cardslist .card-body {
	width: calc(100% - 200px);
}

#plist-cardslist {
    overflow-x: hidden;
}


#resultpage #plist-cardslist .card-body{
	top: 20%; 
    /*transform: translateY(-65%); */
	left: 150px;
	width:60%;
}

#history #plist-cardslist .card-body{
	top: 10%; 
    /*transform: translateY(-65%); */
	left: 150px;
}
#history_wait #plist-cardslist .card-body{
	top: 20%; 
	left: 150px;
}

#history_sent #plist-cardslist .card-body{
	top: 35%; 
    /*transform: translateY(-65%); */
	left: 150px;
}


@media screen and (min-width: 280px) and (max-width: 429px) {
	
#history #plist-cardslist .card-body,
#history_wait #plist-cardslist .card-body{
	top: 20%;
	width:60%;
}
	
#history_sent #plist-cardslist .card-body{
	top: 40%;
	width:60%;
}


	
}



@media screen and (min-width: 280px) and (max-width: 429px) {
	
	#history #list-cardslist .body-name,
	#history_wait #list-cardslist .body-name,
	#history_sent #list-cardslist .body-name{
		font-size: 0.7em;
			height: 30px;
	}
	
	#history #list-cardslist .card-body,
	#history_wait #list-cardslist .card-body,
	#history_sent #list-cardslist .card-body{
				width:80%;
	}
	
	
	

	
	
	
	
	#resultpage #plist-cardslist .card-body{
    transform: translateY(-50%); 
		top:40%;
}
	
	#resultpage #plist-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.1em;
        height: 75px;
        width: 93%;
    
	}
	
		#resultpage #list-cardslist .card-body{
    transform: translateY(-50%); 
		top:40%;
}
	
	#resultpage #list-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.1em;
	}
	
	

}



@media screen and (min-width: 430px) and (max-width: 767px) {
	
	#resultpage #plist-cardslist .card-body{
    transform: translateY(-50%); 
		top:40%;
}
	
	#resultpage #plist-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.1em;
        height: 75px;
	}
	
		#resultpage #list-cardslist .card-body{
    transform: translateY(-50%); 
		top:40%;
}
	
	#resultpage #list-cardslist .body-name{
		font-size: 0.8em;
        line-height: 1.1em;
	}

}



@media screen and (min-width: 430px) and (max-width: 768px) {
    #resultpage .card-body {
        bottom: 25px;
    }
}


/*画像無しリスト*/
#list-cardslist .card {
	width: 100%;
	height:120px;
}

#resultpage #list-cardslist .card-body {
	top: 40%; 
    transform: translateY(-50%); 
	left:0;
    width: calc(100% - 40px);
}

#history #list-cardslist .card-body,
#history_wait #list-cardslist .card-body,
#history_sent #list-cardslist .card-body{
	top: 42%; 
    transform: translateY(-50%); 
	left:0;
    width: calc(100% - 40px);
}



#list-cardslist .body-name{
	height:auto;
	width: 100%;
		
}

#list-cardslist .body-return br{
	display: none;
	padding-right:5px;
}
#list-cardslist .body-return br::after {
  content: " "; /* 半角スペースを挿入 */
}


@media screen and (min-width:280px) and (max-width:429px){
	#list-cardslist .card {
	height:90px;
}
	
	#resultpage #list-cardslist .card-body{
	top: 45%; 
	width: calc(100% - 25px);
}
	
	#history #list-cardslist .card-body,
	#history_wait #list-cardslist .card-body{
	top: 32%; 
	width: calc(100% - 25px);
		bottom:30px;
}
	
		
	#history_sent #list-cardslist .card-body{
	top: 65%; 
	width: calc(100% - 25px);
}




}

@media screen and (max-width: 430px) {
    #list-cardslist .body-point img {
        padding:2px 0 0 0 ;
    }
	
	 #history #list-cardslis .body-point {
        font-size: 0.9rem;
    }
}

@media screen and (min-width: 430px) and (max-width: 768px) {
	
	#list-cardslist .card{
		height:80px;
	}
}




/*//////////////////////////////カードリスト表示切替（対象：抽選結果・獲得一覧）ここまで///////////////////////////////////*/

	
#resultpage .fixed-box {
    position: fixed;
    right: 10px;
    bottom: 30px;
    width: 300px;
    background: #222;
    z-index: 999;
	height:75px;
}

#resultpage .fixed-box-title {
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
    background: #000;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
	height: 20px;
}



@media screen and (max-width: 1024px) {
    #resultpage .fixed-box {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 55px;
		height: 25px;
    }
	
	#resultpage .fixed-box-title{
		padding:5px 0;
	}

	
	#resultpage .fixed-box-body{
		width:100%;
		margin:0 auto;
	}
	
}

@media screen and (min-width:768px) and (max-width:1024px){
#resultpage .fixed-box {
        width: 250px;
        position: fixed;
        left: auto;
        bottom: 90px;

	}


	
#resultpage .fixed-box-title {
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
    background: #000;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
	height: 20px;
}

}

@media screen and (min-width: 430px) and (max-width: 768px) /*iP14,iPadmini対応*/{
	.card-body{
		bottom:10px;
	}
	
	.body-name{
		width: 90%;
		height: 45px;
		line-height: 1.1rem;
		            font-size: 0.9rem;
	}
	#history #plist-cardslist .body-name{
		font-size: 0.8em;
			height: 70px;
	}
	
	#history #plist-cardslist .card-body{
				width:65%;
	}
	
#history #list-cardslist .body-name{
		font-size: 0.8em;
        height: 22px;
        width: 115%;
	}
	
	#history #list-cardslist .body-point {
		font-size: 1.2rem;}
	
	#history #list-cardslist .card-body{
				width:80%;
		bottom:0;
	}

	
	#history_wait #list-cardslist .body-name{
		font-size: 0.8em;
        height: 33px;
        width: 120%;
	}
	
	#history_wait #list-cardslist .body-point {
		font-size: 1.2rem;}
	
	#history_wait #list-cardslist .card-body{
				width:80%;
		        bottom: -10px;
	}
	
		#history_sent #list-cardslist .body-name{
		font-size: 0.8em;
        height: 33px;
        width: 120%;
	}
	
	#history_sent #list-cardslist .body-point {
		font-size: 1.2rem;}
	
	#history_sent #list-cardslist .card-body{
				width:80%;
		        bottom: 35px;
	}


	
	.body-return {
		font-size: 1rem;}
	
		#resultpage #plist-cardslist .body-name{
		width: 100%;
        height: 65px;
        line-height: 1.5em;
        font-size: 1em;
    

	}

	
	
	
}

@media screen and (min-width: 769px) and (max-width: 1024px) /*iPad対応*/{
	.body-return {
		font-size: 1.5rem;
		line-height: 1.7rem;
	}

}



/*
##################################################################
カードの発送依頼画面（history_sending.html）
##################################################################
*/

#sending-menu{
	max-width:1024px;
	width:100%;
	margin-bottom:60px;
}

.selected-view,
.address-display {
  width: 80%;
  margin: 0 auto;
}




.selected-view{
	background-color: #f5f5f5;
    height: 100px;
    margin-bottom: 30px;
    padding: 15px 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
}

.body-point-area{
	text-align: center;
}

.selected-txt{
text-align:center;
	font-size: 0.8em;
    font-weight: bold;
}

.body-point-area .body-point {
  display: flex;
  align-items: center; 
  justify-content: center; 
  gap: 0.5rem; 
font-weight:bold;
}

.body-point-area .body-point img {
  width: 15px;
    height: auto;
    padding-top: 3px;
	margin-right:0;
}

.a-d-title {
    font-size: 0.8em;
}

.a-display1{
    border: 1px #c0c0c0 solid;
    border-radius: 10px;
    margin: 0 auto;
    padding: 15px;
    font-size: 0.8em;
    line-height: 1.6;
	 min-height: calc(1.6em * 4); 
}



@media screen and (min-width: 280px) and (max-width: 430px) /*スマホ対応*/{
#sending-menu {
    margin-bottom: 30px;
}

.selected-view,
.address-display {
  width: 100%;
  margin: 0 auto;
}
	
.selected-view{
	margin-bottom:20px;
	padding:0;
}
	
	


}


/*
##################################################################
カードの発送依頼画面（history_sending.html）ここまで
##################################################################
*/


/*
#################################
発送・還元操作後画面（history_complete.html）
#################################
*/
/*見出し-もう１度引く*/
#his-comp .balloon {
position: relative;
    display: block;
    margin: 10px auto 0 auto;
    padding: 0 10px;
    min-width: 120px;
    max-width: 45%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border-bottom: solid 3px #ff0000;
    box-sizing: border-box;
}

#his-comp .balloon:before {
 content: "";
  position: absolute;
  bottom: -23px;
  left: 50%;
  margin-left: -12px; /* borderの幅の半分 */
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#his-comp .balloon:after {
 content: "";
  position: absolute;
  bottom: -29px;
  left: 50%;
  margin-left: -14px; /* borderの幅の半分 */
  border: 14px solid transparent;
  border-top: 14px solid #ff0000;
  z-index: 1;
}

#his-comp .balloon p {
  margin: 0;
  padding: 0 0 0 5px;
  text-align: center;
	color:#ff0000;
}


/*もう1度引く-ガチャメニュー*/
#his-comp .item-list{
	transform:scale(0.8);
	box-sizing: border-box;
	margin:0 auto 100px auto;
	box-shadow:none;
	border:#c0c0c0 solid 1px;
	position: relative;
    top: -5px;
	}

#his-comp .item-body_info {
    height: 40px;
}
#his-comp .item-list .gacha-button{
	transform:scale(1.35);
	margin:35px auto 0 auto;
}

#his-comp .item-img {
    height: 260px;
    border-radius: 18px 18px 0 0;
    border: none;
}




@media screen and (min-width: 768px){
		#his-comp .gacha-button{
			transform: scale(1.5);
			margin:40px auto 0 auto;
		}
	
	#his-comp .balloon{
		max-width:22%;
	}

}




/*
#################################
マイページ
#################################
*/

#mypage #cont{
	padding-bottom: 0;
}

/*ページ上段領域の設定*/



.rankview{
	max-width: 1024px;
    width: 100%;
    height: 250px;
    transform: scale(0.7);
}


@media screen and (min-width: 768px) {
    .rankview {
        display: flex;
        height: 295px;
        padding-bottom: 135px;
    }
}




@media screen and (min-width: 280px) and (max-width: 430px) /*スマホ対応*/{
	.rankview{
		height:470px;
	    transform: scale(1);
	}

}

@media screen and (min-width: 430px) and (max-width: 768px)/*ipadmini対応*/ {
	.rankview{
		height:480px;
	}
}
@media screen and (min-width: 830px) and (max-width: 1024px) /*タブレット対応*/ {
	.rankview{
		height:340px;
	}

}



/*ポイント残高表示*/

.mypage-points-number{
	position: relative;
}

/**/
.mypage-points-number img {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 20%;
    left: -4rem;
}

.mypage-point {
    width: 50%;
    height: auto;
	padding: 15px 10px 0 0;
	margin:0;
	transform: scale(0.8);
}

@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
	
/**/
	
.mypage-point {
    width: 100%;
    height: auto;
	margin: 0;
	padding: 0;
}
	
/**/
	
	.his-button {
		top:13%;	
	}
	
}

@media screen and (min-width: 430px) and (max-width: 767px) /*ipadmini、iPhone14対応*/{
.mypage-point {
  width: 90%; /* 任意の横幅を指定 */
	padding:0;
	margin:25px auto;
	transform:scale(1);
}
}

@media screen and (min-width: 768px) and (max-width: 1024px) /*タブレット対応*/{
	.mypage-point {
  width: 80%; /* 任意の横幅を指定 */
}

	
}




.pointview p{
	color:#FFFFFF;
	font-weight: bolder;
	font-size:18pt;
	height:50px;
	padding-left: 2px;
	margin-left:10px;
}
.pointbuy {
    background-color: #000000;
    border-radius: 30px;
    width: 90px;
    height: 50px;
    margin-top: 10px;
    margin: 10px 0 10px 10px;
}

.pointview a,
.pointview a:visited {
    color: #FFFFFF;
    /* vertical-align: middle; */
    padding: 2px 0 0 0;
    display: block;
    width: 100%;
    height: 50px;
}

.pointview{
	display:flex;
	justify-content: space-between;
	border:2px solid #999999; 
	border-radius:40px;
	width:90%;
	height: 70px;
	margin:0 0 25px 0;
}

@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
		.pointview{
		width:80%;
		height:50px;
		margin: 0 auto 15px auto;
	}
	
	.pointview a, .pointview a:visited {
    color: #FFFFFF;
    /* vertical-align: middle; */
    padding: 3px 0 0 0;
    display: block;
    width: 100%;
    height: 30px;
}
	
	.pointview p {
    color: #FFFFFF;
    font-weight: bolder;
    height: 50px;
    padding-left: 2px;
    margin-left: 10px;
}
	
		.pointbuy {
        margin: auto 0 auto 10px;
		font-size:16px;
		height:35px;
		width:70px;
	}
	
		.pointbuy p {
    height: 35px;
	}

	
		.pointbuy a {
		font-size:16px;
		display:block;
	}
	

	
}

@media screen and (min-width: 430px) and (max-width: 768px) /*ipadmini、iPhone14対応*/{
	.pointview{
        width: 90%;
        margin: 0 auto 10px auto;
	}
	
	.pointbuy {
        margin: auto 0 auto 10px;
		width:80px;
	}

	
	.pointbuy p {
    font-size: 16pt;
}
	
	.pointview a, .pointview a:visited {
    padding: 5px 0 0 0;
}
}





.mypage-points-number .possession{
    padding: 10px 20px 0 0;
	font-size:40px;
}
@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
.mypage-points-number .possession{
		font-size: 23px;
        padding: 10px 10px 0 0;
	}
	
    .mypage-points-number img {
width: 20px;
        height: 20px;
        bottom: 1.5rem;
        right: 0;
        left: -2.5rem;
	}
}
@media screen and (min-width: 430px) and (max-width: 767px) /*iPhone14対応*/{
	.mypage-points-number .possession{
		font-size: 30px;
        padding: 17px 10px 0 0;
	}
	.mypage-points-number img {
		left: -3.8rem;
        transform: scale(0.6);
        top: 1.8rem;
	}
	}

@media screen and (min-width: 768px) and (max-width: 1024px) /*タブレット対応*/{
	
	.mypage-point{
		margin: 10px 0 0 0;
		width:50%;/*1110追加*/
	}
	.mypage-point-title{
		marigin-left:20px;
	}
    .pointview {
        height: 50px;
        margin: 0 0 20px 20px;

    }
	
    .pointbuy {
        transform: scale(0.8);
        margin: 0 0 0 0px;
    }

	.mypage-points-number{
		transform: scale(0.7);
	}
	.mypage-points-number .possession{
		padding:5px 10px 0 0;
		font-size:32px;
	}
	
    .mypage-points-number img {
        bottom: 0.2rem;
        left: -5rem;
	}
}

@media screen and (min-width: 1024px) /*タブレット対応*/{
	
	.mypage-point{
        margin: 20px 0 0 0;
	}

}


.pointbuy p a:visited{
	color:#FFFFFF;

}






/*achievement設定（獲得一覧リンク）*/
.achievement {
    background-color: #000000;
    color: #FFFFFF;
    width: 90%;
    border-radius: 40px;
    height: 70px;
    display: flex;
    justify-content: center;
    margin-left: 0;
}
.achievement p{
	font-size:30px;
	font-weight: bold;
	text-align: center;
    padding: 3px 0 0 0;
}
.achievement img{

    padding: 0 0 0 8px;	
	vertical-align:middle;
}

.achievement a,
.achievement a:visited{
	color:#FFFFFF;
	/*vertical-align: sub;*/
}

@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {

.achievement {
    width: 80%;
    border-radius: 40px;
    height: 50px;
    margin: 0 auto;
}
.achievement p{
	font-size:14px;
	font-weight: bold;
	text-align: center;
	padding: 10px 0 0 10px;
}
	
	.achievement img{
		transform: scale(0.8);
	}
	
}

@media screen and (min-width: 430px) and (max-width: 768px) /*ipadmini、iPhone14対応*/{
	.achievement {
    width: 90%;
		margin:0 auto;
}
.achievement p{
	font-size: 26px;
    padding: 10px 0 0 0;
}
	
	.achievement img{
		transform: scale(1.1);
	}
	
}

	
@media screen and (min-width: 768px) and (max-width: 1024px)/*タブレット対応*/ {
	.achievement{
		height: 50px;
		margin:0 0 0 20px;
}
		.achievement p{
        transform: scale(0.6);
        padding: 0;
		margin: 0 0 11px 10px;	
	}
	

}
.achievement p a:visited {
	color:#FFFFFF;
}



/*achievement設定　終*/




.rankhowto{
	margin:3px 7px 0 0;
	text-align: end;
	font-size:11px;
position: absolute;
    top: 280px;
    left: 349px;
	z-index:150;
}

@media screen and (min-width: 768px) {
	.rankhowto{
		font-size:14px;
	}
	}

.rankhowto a{
	border-bottom:1px dashed #999999;
	padding:0 0 3px 0;
	color:#000000;
}

.rankhowto a:visited{
	color:#000000;
}


/*20250110-top/left変更*/@media screen and (min-width: 280px) and (max-width: 429px)/*スマホ対応*/ {
		.rankhowto{
		top: /*205px*/40%;
        left: /*-65px*/-18%;
        flex-direction: flex;
        width: 100%;
	}

}
/*20250110-top/left変更-min/max変更*/@media screen and (min-width: 430px) and (max-width: 439px) /*iP14promax対応*/{
	.rankhowto{
		top: 38%;
        left: 57%;	
	}

}
/*20250111-top変更*//*20250110-top/left変更-min/max変更*/@media screen and (min-width: 440px) and (max-width: 767px) /*iP16promax対応*/{
	.rankhowto{
		top: 39%;
        left: 62%;	
	}

}
@media screen and (min-width:765px) and (max-width: 819px) /*iPadmini対応*/{
		.rankhowto{
		top: 235px;
        left: 260px;    	}

}

@media screen and (min-width: 820px) and (max-width: 829px) /*タブレット対応1*/{
	.rankhowto{
		top: 265px;
        left: 280px;
    	}

}


@media screen and (min-width: 830px) and (max-width: 1020px) /*タブレット対応2*/{
		.rankhowto{
		top: 305px;
        left: 280px;
    	}

}

@media screen and (min-width: 1024px) and (max-width: 1500px){
		.rankhowto{
		top: 300px;
        left: 375px;
	}

}


/*mypage/rank_howto.html-20250131追加-2月から適用-ランク制度変更対応*/
.c-annotation{
	max-width:1024px;
	width:80%;
	margin:0 auto;
	
}


@media screen and (min-width: 320px) and (max-width: 767px) {
.c-annotation {
    margin: 0 5px 0 25px;
	width: 85%;
    text-indent: -2.5em; /* 1行目を字下げしないように設定 */
    padding-left: 1.8em;  /*2行目以降を字下げする幅 */
	font-size:0.5em;
}
}
/*mypage/rank_howto.html-20250131追加-2月から適用-ランク制度変更対応-ここまで*/

	


/*/ランクカードの回転/*/
/* カード本体 */
.rankcard {
  width: 50%; /* 任意の横幅を指定 */
  position: relative;
  cursor: pointer;
  margin: 0 0 20px 0;
  perspective: 1000px; /* 3D効果のために追加 */
  aspect-ratio: 16 / 9; /* 追加 */
  transform: scale(0.9);

}

@media screen and (min-width: 280px) and (max-width: 430px) {
  .rankcard {
    width: 100%;
  }  
}

@media screen and (min-width: 430px) and (max-width: 767px) {
  .rankcard {
    width: 100%;
	transform: scale(1);
    bottom: 50px;
  }  
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .rankcard {
    width: 50%;/*1110変更*/
	left:25px;
  }  
}

/* カード内の画像 */
.rankcard img {
  width: 100%;
  height: 100%;
}

/* カード裏面・表面の共通スタイル */
.rankcard .back,
.rankcard .front,
.rankcard .rank-blank{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
 transition: transform 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* カード表面のスタイル */
.rankcard .front {
  transform: rotateY(0deg);
}

/* カード裏面のスタイル */
.rankcard .back {
  transform: rotateY(180deg);
}

/* クリック時のアニメーション */
.rankcard.flip .front {
  transform: rotateY(180deg);
}

.rankcard.flip .back {
  transform: rotateY(360deg);
}

/*/ランクカードの回転　終/*/





#mypage-other .mo{
			
	width:95%;
	margin: 0;
}

@media screen and (min-width: 768px){
#mypage-other .mo{
	width:48%;
}
}



@media screen and (min-width: 768px){
#mypage-other{
	display: flex;
	justify-content: space-between;
}
}

.mo div{
	border-bottom:dashed 1px #000000;
	margin:0 0 8px 0;
}

.mo div p,
.mypage-point-title{
	font-weight: bold;
	font-size:20px;
}
.mypage-point-title{
	margin-left:15px;
}

@media screen and (min-width: 768px){

.mo div p,
.mypage-point-title{
	font-weight: bold;
	font-size:25px;
}
}

.mo p{
	padding:0 0 0 15px;
	font-weight: 100;
}

.mo p a{
	font-size:15px;
	color:#000000;	
}
.mo p a:visited{
	color:#000000;	
}

@media screen and (min-width: 768px){
	.mo p a{
	font-size:20px;
}
}

.mo p a:visited{
	color:#000000;
}

#mypage-other .mo:last-child{
	margin:20px 0 20px 0;
}
@media screen and (min-width: 768px){
#mypage-other .mo:last-child{
	margin:0;
}
	#mypage-other .mo{
		padding-bottom:100px;
	}
}



.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	color:#FFFFFF;
}

.ranknext {
    font-size: 2.5em;
    font-weight: bold;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        bottom: 0;	
}
.ranknext-point {
    font-size: 2.2em;
    text-align: center;
    position: absolute;
    top: 34%;
    left: 0;
    right: 0;
}

.ranknext-point span{
	font-size:1.7em;
}
.user-id {
    font-size: 1.8em;
    position: absolute;
    bottom: 10%;
    right: 5%;
    z-index: 1000000;
}



@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {
.rankcard {
    width: 100%;
    height: 220px;
    position: relative;
    cursor: pointer;
    margin: 0 0 20px 0;
    transform: scale(0.7);
}	
	
	.ranknext,
	.ranknext-point,
	.user-id{
		transform: scale(0.9);
	}
	
	.user-id{
		bottom:0;
	}
	
	.ranknext-point{
		top:36%;
	}
	
	.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -18px;
    /* left: 0; */
    color: #FFFFFF;
    right: 0;
    /* bottom: 0; */
}
}

@media screen and (min-width: 430px) and (max-width: 770px) /*ipadmini、iPhone14対応*/{
	
	.ranknext,
	.ranknext-point,
	.user-id{
		transform: scale(0.9)
	}


	.user-id{
		bottom:10%;
	}
}

@media screen and (min-width:436px) and (max-width: 768px) /*iPadmini対応*/{
	    .rankview {
        height: 280px;
    }
	    .rankcard {
        top: -15px;
    }
}

@media screen and (min-width: 830px) and (max-width: 1024px) /*タブレット対応*/{
	
	.ranknext{
		top: 10%;
        font-size: 4.5rem;
	}
	.ranknext-point{
		top: 27%;
        font-size: 4rem;
	}
	
	.user-id{
        bottom: 10%;
        font-size: 3.5rem;
    
	}
}

@media screen and (min-width: 436px) and (max-width: 768px){
	.rankview{position:absolute;}
}

@media screen and (min-width: 436px) and (max-width: 1024px) /*タブレット対応*/{

.card-back{
	transform:scale(0.8);
}
}

/*
#################################
マイページ/会員ランクについて
#################################
*/

#rankhowto .cont-body{
	padding-top:8px;
	padding-bottom: 0;
}

.cont-back{
	background-color: #f2f2f2;
	margin-left: -20px; /* 親要素の padding-left と同じ値をマイナス */
    margin-right: -20px; /* 親要素の padding-right と同じ値をマイナス */
    width: calc(100% + 40px); /* 親要素の横幅に padding 分を足す */
    box-sizing: border-box; /* 子要素のパディングがサイズに含まれるように設定 */
	padding-bottom: 5px;
}

.c-square1{
max-width: 1024px;
    width: 100%;
    margin: 0 auto 0 auto;
    height: auto;
    padding: 20px 0 20px 0;
}

.c-sample{
	width:60%;
	margin:30px auto 35px auto;
	text-align: center;
}

.c-sample img{
    width: 70%;
    height: auto;
    margin: 30px auto;
    display: block;
}


.c-sample p{
	display: inline-block;
	font-size:24px;
	font-weight: 100;
	border-bottom:5px solid #000000;
	
}


.c-s1-txt{
	text-align: center;
	font-weight:300;
font-size:26px;}

.c-s1-txt span{
	font-size:45px;
	font-weight: bold;
}

.c-s2-txt {
    margin: 5px auto;
	max-width: 1024px;
    width: 100%;
	font-size: 23px;
}


.c-h3{
	font-weight:bolder;
	background-color:#000000;
	color:#FFFFFF;
	text-align:center;
	max-width: 1024px;
    width: 25%;
    margin: 0 auto;
	font-size: 1em;
}


.c-annotation{
	text-indent: -1em;
	/*padding-left: 1em;*/
	text-align:start;
	font-size:1.3rem;
	font-weight:100;
	padding-left: 3.5em;
	width: 50%;
    margin: 0 auto;
}


.c-list {
    width: 100%;
	position: relative;
	margin: 10px 0 30px 0;
	text-align:center;
	display: flex;
	flex-direction: column;
	font-size:21px;
}

.c-list:last-child{
	margin-bottom:10px;
}

.c-list img{
	width:50%;
	height:auto;
	margin:0 auto;
	position: relative;
	padding-bottom:5px;
}


.c-list table {
    width: 95%;
    margin: 0 auto;
}

.c-list-back1 {
    background-color: #f2f2f2;
	color:transparent;
	height: 40px;
	width:20%;
	position: absolute;
	top:0;
	left:0;    
}

.c-list-back2{
	background-color: #f2f2f2;
	color:transparent;
    height: 40px;
	width:20%;
	position: absolute;
	top:0;
	right:0;    
}



.c-list tr,
.c-list th,
.td-middle,
.td-last{
	text-align:center;
	font-size:18px;
	font-weight:100;
}

.tr-top th{
	background-color:#f2f2f2;
	font-weight:bold;
	height: 40px;
	vertical-align:middle;
}


.td-top{
	text-align:start;
	padding:0 0 0 15px;
}

.c-list td{
	height:50px;
	vertical-align:middle;
}


.c-list tr:nth-child(n+2){
    border-bottom: 1px #cccccc solid;
}


.c-list tr:last-child{
	border:none;
}

.c-list .c-list-title{
	font-size: 1em;
    font-weight: bold;
    border-bottom: 4px solid #000000;
    margin: 0 auto 18px auto;
	display: inline;
	color:#000000;
}

.c-list-subtitle{
    font-size: 1em;
    font-weight: 100;
    margin: 0 0 20px 0;
    line-height: 1.5rem;
	color:#333;
}

.c-list-subtitle p:first-child{
	font-weight:bold;
	font-size: 0.9em;
	padding:0 0 10px 0;
}
.c-list-subtitle p:last-child{
	font-size: 0.6em;
}


	.c-s2-txt-p{
    font-size: 0.8em;
	font-weight:100;
	width:90%;
	text-align:center;
	margin:15px auto 0 auto; 
}



/*20250110対応-min/max数値変更*/@media screen and (min-width: 320px) and (max-width: 767px)/*スマホ対応(iP14込み)*/ {
	
	.c-list{
		font-size:19px;
	}
	.c-list .c-list-title{
		margin-bottom:18px;
	}
	
		.c-list-subtitle {
		line-height: 1.4rem;
		margin:0 0 20px 0;
	}
	
	.c-sample {
        width: 90%;
        margin: 10px auto 25px auto;
        height: 100%;
	}
	
	.c-sample p {

		font-size: 18px;}
	
	.c-sample > p:first-of-type {
        font-size: 18px;
        margin: 0 0 5px 0;}
	
.c-sample img{
    width: 100%;
	margin: 40px auto;
	}
	
	.c-h3 {
    font-size: 20px;
		width:50%;
}

	.c-s2-txt-p{
    font-size: 12px;
}
	
	.c-list tr, .c-list th, .td-middle, .td-last {
    font-size: 14px;
}
	
	.c-list img{
		width:100%;
	}
	
	
	
	
	.c-annotation{
        width: 95%;
        margin: 0;

        padding-left: 2.5em;
        font-size: 0.37em;/*1217修正*/
	}

	
}
@media (max-width: 320px) {
	.c-h3 {
		width:75%;
	}
	.c-list img {
        width: 100%;
    }
	
	.c-list-subtitle p {
    font-weight: bold;
}
	
	.c-annotation {
		font-size:1rem;
		padding-left:2em;
		width:95%;
	}
	
}


/*20250110対応-min数値変更*/@media screen and (min-width:441px) and (max-width: 768px) /*iPadmini対応*/{

.c-sample img {
	width: 90%;
	margin: 10px auto;
	}
	
.c-h3 {
    font-size: 24px;
	 width: 40%;
	}
	
	
	
.c-list-subtitle p {
    font-weight: bold;
}
	

	.c-list img{
		width:100%;
	}
	
.c-list-subtitle {
	line-height: 2rem;
	text-align:center;
	}

.c-annotation{
        width: 100%;
        margin: 0;
        padding-left: 1.5em;
        font-size: 2rem;
	}

   

	
	
}

@media screen and (min-width: 770px) and (max-width: 1024px) /*タブレット対応*/{
	
	.c-sample img {
	width: 90%;
	margin: 10px auto;
	}
	
.c-h3 {
    font-size: 34px;
	width:40%;
	}
		
	.c-list img{
		width:100%;
	}
	
.c-list .c-list-title {
    font-weight: bold;
}
	
.c-list-subtitle {

    line-height: 2.3rem;
}
	
	.c-list-subtitle p {
    font-weight: bold;

}
	
	.c-annotation {
		font-size: 2.5rem;
        padding-left: 1.5em;
        width: 95%;
	}
	


	

}

/*
#################################
マイページ/獲得カード一覧
#################################
*/

#history .blank{
margin-bottom:100px;	
}

#history .cards,
#history_wait .cards,
#history_sent .cards{
	  width: 100%;
    justify-content: space-between;
}



#history .cards::after,
#history_wait .cards::after,
#history_sent .cards::after{
	display: block;
	content:"";
	width: 48%;
}

/* 親要素の設定 */
#history .nodata,
#history_wait .nodata,
#history_sent .nodata {
    width: 100%;
    position: relative; /* 疑似要素を相対配置で適用 */
    z-index: 1; /* 本体を前面に配置 */
}

/* 背景画像の設定 */

#history .cont-body,
#history_wait .cont-body,
#history_sent .cont-body{
    position: relative; /* 疑似要素を相対配置で適用 */
    /* 本体のスタイル */
    z-index: 1; /* 本体を前面に配置 */
   /*  background-color: rgba(255, 255, 255, 0.9); 必要に応じて背景色の透明度を設定 */
}


#history .cont-body::before,
#history_wait .cont-body::before,
#history_sent .cont-body::before {
    content: ""; /* 疑似要素を生成 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/background-metakozo.svg);
    background-repeat: no-repeat;
    background-size: 45%;
    /*background-attachment: fixed;*/
    background-position: center 120%;

    /* 半透明の設定 */
    opacity: 0.2; /* 0（完全透明）〜 1（完全不透明）の間で調整 */
    z-index: -1; /* 背景として扱うため後ろに配置 */
}

/* li要素がない場合の背景画像 */

#history .cont-body.no-cards::before,
#history_wait .cont-body.no-cards::before,
#history_sent .cont-body.no-cards::before {
    background-image: url(../images/background-nodata.svg); /* 差し替え用の画像を指定 */
    background-size: 30%; /* 必要に応じて調整 */
    background-position: center 30%;
    opacity: 0.2; /* 半透明の設定 */
}

@media screen and (max-width: 440px)  /*SP対応*//*20250107max数値変更*/{
#history .cont-body::before,
#history_wait .cont-body::before,
#history_sent .cont-body::before {
	background-size: 90%;	
	background-position: center 20%;
	}
	
#history .cont-body.no-cards::before,
#history_wait .cont-body.no-cards::before,
#history_sent .cont-body.no-cards::before {
    background-size: 60%; /* 必要に応じて調整 */
    background-position: center 20%;
	top:0;
}

}

/*20250107対応-min/max対応px数値変更*/@media screen and (min-width: 441px) and (max-width: 768px){
	#history .cont-body::before,
#history_wait .cont-body::before,
#history_sent .cont-body::before {
	background-size: 65%;	
	background-position: center 100%;
	}

}

/*20250107対応-追加*/@media screen and (min-width: 440px) and (max-width: 767px)/*ip16promax対応*/{
	#history .cont-body::before,
#history_wait .cont-body::before,
#history_sent .cont-body::before {
	background-size: 100%;	
	background-position: center 100%;
	top: -40%;
	}

}


/* 背景画像の設定 ここまで*/


#history .cont-txt,
#history_wait .cont-txt,
#history_sent .cont-txt{
	text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 19px;
    padding-bottom: 0;
    padding-top: 10px;
}

#history .cont-txt:nth-of-type(1),
#history_wait .cont-txt:nth-of-type(1),
#history_sent .cont-txt:nth-of-type(1) {
    margin-bottom: 0;
	padding-bottom:0;
}

#history .cont-txt:nth-of-type(2),
#history_wait .cont-txt:nth-of-type(2),
#history_sent .cont-txt:nth-of-type(2) {
	padding-top:0;
}

@media screen and (min-width: 280px) and (max-width: 429px) {
	#history .cont-txt,
#history_wait .cont-txt,
#history_sent .cont-txt{
    margin-bottom: 0;
}

}


#history-tab{
	max-width:1024px;
	width: 80%;/*コンテンツ領域の横幅*/
	height:auto;
    margin: 0 auto;
	position: relative;
}


#his-tab a{
	/*font-size:17px;20250208対応-変更*/font-size:14px;
}

@media screen and (max-width: 768px){
	#history-tab{
		width:100%;}

}

.his-outline{
	width:100%;
	height:530px;
	padding:0;
	box-sizing: border-box;
	overflow-y: scroll;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
  	scrollbar-width: none;       /* Firefox 対応 */
}

.his-outline::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}


@media screen and (max-width: 430px)  /*SP対応*/{
	.his-outline{
	padding: 5px 0 0 0;
	}
}

/*20250107対応-max数値変更*/@media screen and (min-width: 390px) and (max-width: 767px) /*SP対応(SE等小型の端末除く)*/{
	.his-outline{
	height:805px;
	}/*20250107対応-650p→805pxへ変更*/
}





#his-tab{
	width:100%;
	height:50px;
	display: flex;
	font-size:18px;
	z-index:99;
    top: 50px;
	margin: 0;
}

#history #his-tab .his-tab1 a,
#history_wait #his-tab .his-tab2 a,
#history_sent #his-tab .his-tab3 a{
	border-bottom:#000000 4px solid;
	border-radius: 0;
	padding: 0 0 30px 0;
}

@media screen and (max-width: 430px)  /*SP対応*/{
	#his-tab{
		height:45px;
		top:-45px;
	}
}
.his-tab1,
.his-tab2,
.his-tab3{
	width:calc(100% / 3);
	padding:10px;
	text-align: center;
}
@media screen and (max-width: 430px)  /*SP対応*/{
	.his-tab1, 
	.his-tab2, 
	.his-tab3{
		padding:5px;
	}
}
.his-tab1 a,
.his-tab2 a,
.his-tab3 a{
	margin:0 auto;
	display: block;
}
.his-tab1 a,
.his-tab2 a,
.his-tab3 a{
	color:#000000;
}


.his-tab1 a:visited,
.his-tab2 a:visited,
.his-tab3 a:visited{
	color:#000000;
}


/*history.html*/
#history .his-tab1,
#history .his-tab2,
#history .his-tab3{
	color:#000000;
}


#history #mypage-other,
#history_wait #mypage-other,
#history_sent #mypage-other{
	margin-top:70px;
}

#history #mypage-other .mo,
#history_wait #mypage-other .mo,
#history_sent #mypage-other .mo{
    margin-right: auto;
    margin-left: auto;
}

#history .twin-button{
	position: absolute;
    bottom: 30px;
    margin: 0 auto;
    right: 0px;
	left:0;
    width: 60%;
	z-index:499;
}
#history .twin-button .button{
	box-shadow: 3px 5px 5px rgba(0, 0, 000, .2);
	height:45px;
}

/*history.html-獲得一覧のページ送り（100件ずつ表示）*/
  .history-pagination {
            display: flex;
            justify-content: center;
            padding: 10px;
            flex-wrap: nowrap;
            overflow: hidden;
            font-family: "Noto Sans JP", sans-serif;
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            max-width: 1024px;
            width: 60%;
            height: auto;
        }

.history-pagination a {
    background-color: #FFFFFF; /* 背景色を白に */
    border: 1px solid #ddd; /* 枠線を薄いグレーに */
    border-radius: 4px; /* 角を丸くする */
    width: 30px; /* 正方形の幅 */
    height: 30px; /* 正方形の高さ */
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    margin: 0 5px; /* ボックス間のスペース */
	color: #000000;
	font-size: 1.2rem;
}


.history-pagination a:first-child,
.history-pagination a:last-child {
    background-color: transparent; 
    border: none;
    font-size: 1.5rem; 
    width: 30px; 
    height: 30px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: black; 
}


.history-pagination a:visited {
    color: #000000; /* リンクを踏んだ後も文字色は黒に固定 */
}

.history-pagination a:hover{
    background-color: #000000; /* ホバー時の背景色を黒に設定 */
    color: #FFFFFF; /* ホバー時の文字色を白に設定 */
}

.history-pagination a.active {
    background-color: #000000; 
    color: white; /* アクティブなページの文字色を白に設定 */
    border: 1px solid #666666; /* アクティブなページの枠線を緑に設定 */
}

.history-pagination a.disabled {
    pointer-events: none; /* クリックを無効化 */
    color: #ccc; /* 無効なリンクの文字色を薄いグレーに設定 */
    cursor: default; /* 無効なリンクのカーソルを通常の矢印に設定 */
}

.history-pagination a:first-child.active,
.history-pagination a:last-child.active {
    color: black; /* リンクを踏んだ後も文字色は黒に */
}

        .history-pagination a:not(:first-child):not(:last-child):hover {
            background-color: #000000;
            color: #FFFFFF;
        }

.history-pagination a:first-child:hover,
.history-pagination a:last-child:hover {
    color: black; /* リンクを踏んだ後も文字色は黒に */
}

.history-pagination a:not(:first-child):not(:last-child){
	text-indent: 0.16rem;}

        .history-pagination a:not(:first-child):not(:last-child).active {
            background-color: #000000;
            color: white;
            border: 1px solid #666666;
        }

.history-pagination a:first-child,
.history-pagination a:last-child {
	border: none;
    background-color: transparent;
    width: 15px;
    height: 20px;
    transform: none;
    font-size: 4.5rem;
    font-weight: 100;
}

        .history-pagination a:first-child.active,
        .history-pagination a:last-child.active {
            background-color: transparent;
            color: #666666;
            border: none;
        }
			.history-pagination span{
			font-size: 1.2rem;
			margin: 11px 0 0 0;
			}


        @media (max-width: 768px) {
            .history-pagination {
                left: 50%;
                transform: translateX(-50%);
				bottom:75px;
            }
			
				.history-pagination a {
				font-size: 0.9rem;
				width:30px;
				height:30px;
			}
			
			.history-pagination a:first-child, 
			.history-pagination a:last-child{
				font-size: 3.5rem;
				font-weight: 100;
				height: 22px;
			
    			}
			.history-pagination span{
				font-size:0.6rem;
				margin: 18px 0 0 0;
			}


        }

        @media (max-width: 480px) {
            .history-pagination {
                left: 50%;
                transform: translateX(-50%);
				bottom:60px;
            }
			
			.history-pagination a {
				font-size: 0.9rem;
				width:25px;
				height:25px;
			}
			
			.history-pagination a:first-child, 
			.history-pagination a:last-child{
				font-size: 3.5rem;
				font-weight: 100;
				height: 18px;
    			}
			
			.history-pagination span{
				font-size:0.6rem;
				margin: 14px 0 0 0;
			}
        }

        @media (max-width: 320px) {
            .history-pagination {
                left: 50%;
                transform: translateX(-50%);
				bottom:55px;

            }
			.history-pagination a {
				font-size: 0.5rem;
				width:18px;
				height:18px;
			}
        }


@media screen and (max-width: 430px)  /*SP対応*/{
	
		#history .twin-button{
			width: 90%;
		}
		#history .twin-button .button{
			height:35px;
		}
}

@media screen and (min-width: 430px) and (max-width: 767px) /*ip14対応*/{
	
		#history .twin-button{
			width: 90%;
		}
		#history .twin-button .button{
			height:35px;
		}
}


/*history.htmlここまで*/

/*#history_wait.html*/

#history_wait .his-tab2 a{
	color:#000000;
	
}


#history_wait .his-tab1 a:visited,
.his-tab3 a:visited{
	color:#000000;
}


#history_wait .his-tab2 a:visited{
	color:#000000;
}

#history_wait .sort-filter{
	display: flex;
}

#history_wait .sort-filter::after {
    content: "発送準備中"; /* 表示するテキスト */
    display: block; /* 必要に応じてブロック要素として扱う */
    font-size: 14px; /* テキストのサイズを調整 */
    color: #333; /* テキストの色 */
    margin-bottom: 8px; /* 要素との間隔を調整 */
	position: absolute;
    right: 0;
}

 #history_wait .card-body{
	 position: absolute;
	 bottom: 55px;
		}
#history_wait .body-name{
	width:100%;
}

@media screen and (max-width: 430px) {
     #history_wait .card-body{
	 bottom: 30px;
		}

	}

@media screen and (min-width: 430px) and (max-width: 768px) {
	     #history_wait .card-body{
	 bottom: 30px;
		}



}



/*#history_wait.htmlここまで*/


/*history_sent.html*/

#history_sent .body-name {
        align-items: start;
        width: 100%;
		height:40px;
	
	/*20250208追加*/
	 width: 100%;
    height: auto; /* 固定高さを解除 */
    overflow: hidden;
    word-break: break-word;
    margin: 0;
	/*20250208追加*/
    }



#history_sent .his-tab3 a {
    color: #000000;
}

#history_sent .his-tab3 a:visited {
    color: #000000;
}

#history_sent .his-tab3 a:visited {
    color: #000000;
}

#history_sent .his-tab1 a:visited, .his-tab2 a:visited {
    color: #000000;
}


.card-sent{
	font-size:1.4rem;
}
@media screen and (max-width: 430px)  /*SP対応*/{
#history_sent .card-sent{
	font-size:6px;
}
}

@media screen and (min-width: 430px) and (max-width: 768px) /*iP14,iPadmini対応*/{
#history_sent .card-sent{
	font-size:7px;
}
}

 #history_sent .card-body{
	 position: absolute;
	 bottom: 45px;
		}
#history_sent .body-name{
	width:100%;
}

@media screen and (max-width: 430px) {
     #history_sent .card-body{
	 bottom: 15px;
		}
	

	}
@media screen and (min-width: 430px) and (max-width: 768px) {
	     #history_wait .card-body,
	#history_sent .card-body{
	 bottom: 30px;
		}



}

/*0208追加*/

#history_sent .card-label {
    display: flex;
    align-items: center; /* 子要素を垂直方向に中央揃え */
    /* gap: 12px; 画像とカード情報の間隔を適切に調整 */
}

#history_sent .card-body {
    display: flex;
    flex-direction: column;
    position: relative; 
    justify-content: flex-start;
    padding: 0; /* 最小限の上下パディングを設定 */
    height: auto;
}

#history_sent .body-name {
    width: 100%;
    height: auto;
    word-break: break-word;
    margin: 0;
    padding: 2px 0; /* 行間が広がらないように調整 */
    overflow: visible;
}

#history_sent .body-point.en {
    align-self: flex-start;
    margin-top: 0; /* 行間を最小限に確保し調整 */
}

#history_sent .card-sent {
    margin-bottom: 0; /* 上下の要素が詰まりすぎないように微調整 */
}

#history_sent #plist-cardslist .card-body {
    left: -50px;
}

@media screen and (max-width: 320px) {
	#history_sent #plist-cardslist .card-body{
	font-size:0.5em;
	width: 50%;}
}

@media screen and (min-width: 280px) and (max-width: 429px) {
    #history_sent #plist-cardslist .card-body {
        left: 0;
    }
    @media screen and (max-width: 430px) {
        #history_sent #plist-cardslist .card-sent {
            font-size: 1.1em;
        }
    }
}

@media screen and (min-width: 321px) and (max-width: 429px) {
    #history_sent #plist-cardslist .card-body {
        left: 0;
        width: 57%;
        font-size: 0.7em;
    }
    #history_sent #plist-cardslist .body-name {
        font-size: 1.2em;
    }
}

@media screen and (min-width: 430px) and (max-width: 768px) {
    #history_sent #plist-cardslist .card-sent {
        font-size: 0.9em;
    }
    #history_sent #plist-cardslist .body-name {
        font-size: 0.9em;
    }
}

#history_sent #list-cardslist .card-body {
    bottom: 0;
}

#history_sent #list-cardslist .card-sent,
#history_sent #list-cardslist .body-name {
    font-size: 0.95em;
}

@media screen and (min-width: 280px) and (max-width: 429px) {
	
    #history_sent #list-cardslist .card-sent,
    #history_sent #list-cardslist .body-name {
        font-size: 0.7em;
    }
}

@media screen and (min-width: 430px) and (max-width: 768px) {
    #history_sent #list-cardslist .card-sent,
    #history_sent #list-cardslist .body-name {
        width: 120%;
        font-size: 0.8em;
    }
}



@media screen and (min-width: 280px) and (max-width: 429px) {
	
    #history_sent #grid-cardslist .card-body {
		padding-left:5px;
	}
}

@media screen and (min-width: 430px) and (max-width: 768px) {
	#history_sent #grid-cardslist .card-body {
	}
}



/*0208追加ここまで*/


/*history_sent.htmlここまで*/


/*全選択ボタンscript用*/
 .twin-button, .his-button {
        margin-bottom: 10px;
    }
    .card {
        margin-bottom: 10px;
    }
    .twin-button.hide {
        display: none;
    }

.off_button { display: none; }
/*全選択ボタンscript用*/



/*全選択ボタン（固定メニューに設置）*/
.his-button {
    max-width: 1024px;
    width: 25%;
    text-align: end;
    display: flex;
	position: absolute;
    top: 11%;
    right: 0;
}

.his-button1,
.his-button2 {
    padding: 0;
    max-width: 150px;
    width: 100%;
    text-align: center;
	height: auto;
	/*font-size:10px;20250329削除*/
}

@media screen and (min-width: 768px) {
	.his-button1,
	.his-button2 {
		font-size:10px;
	}
	
	.gacha-button .button{
		font-size:10px;
	}
}




.his-button1 {
    background-color: #fff;
}


.his-button1::before,
.his-button2::before {
    content: attr(value);
}


@media screen and (max-width: 430px) /*SP対応*/ {
    .his-button {
        width: 30%;
        height: 25px;
        text-align: end;
    }
	
	 .his-button1,
    .his-button2 {
        font-size: 12.5px;
	}
}



.his-button_wait{
	font-size:25px;
}


@media screen and (max-width: 430px)  /*SP対応*/{
	
	.his-button_wait{
		padding:5px 5px;
		font-size:15px;
	}
}

@media screen and (min-width: 280px) and (max-width: 430px)/*スマホ対応*/ {

	.his-button{
		top:9%;/*20250329変更*/
		right: 10px;/*20250329変更*/
	}
}

@media screen and (min-width: 430px) and (max-width: 767px) /*iP14対応*/{
	.his-button_wait{
		font-size:20px;}
	.his-button {
	width: 25%;/*20250329変更*/
	justify-content: end;
		/*height: 7%;20250329削除transform: scale(0.55);*/
		top: 7%;/*20250329変更*/
        right: 4%;/*20250329変更*/
		
}
	
	    .his-button1,
    .his-button2 {
        padding: 3px 0 3px 0;
        height: 35px;
        /*font-size: 21px;20250329変更*/font-size: 12.5px;
	}
	
	.his-button1/*20250329追加*/ {
    padding-right: 18px;
    width: 115%;
}

}


@media screen and (min-width: 768px) and (max-width: 900px) /*タブレット対応*/{
	.his-button_wait{
		font-size:20px;
	}

}



#result_send_form{
	padding:15px 0 0 0;
}

@media screen and (max-width: 430px)  /*SP対応*/{
#result_send_form{
	padding:5px 0 0 0;
}
}
#resultpage .fixed-box-body.gacha-button{
    z-index: 11;
	background-color: transparent;
}
#history .fixed-box-body.gacha-button {
    z-index: 11;
}


/*固定フッター*/
/*history.html用*/

#history .mypage-points-number{
	display: flex;
    align-items: center; /* 縦方向も中央揃え */
    width: auto;
    margin: 0;
	padding-left: 5px;
	transform: scale(0.7);
	position: absolute;
    left: -20px;
	top:-10%;
}

@media screen and (min-width: 430px) and (max-width: 767px)/*20250329追加*/ {
    #history .mypage-points-number {
        left: -10px;
        top: -5%;
    }
}

#history .fixed-box-body {
	padding:5px 0;
}


#history .button{
	padding:0;
}

#history .pointview {
    border: none;
    margin: 0;
    display: block;
    position: absolute;
    text-align: center;
	z-index:10;
	width:75%;
}

#resultpage .fixed-box-body{
	padding:5px 0;
}

@media screen and (min-width:280px) and (max-width:429px){
#history .pointview {
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}
	
/*#history .mypage-points-number {
    transform:scale(0.85);
	left:5%;
}*/
	
	
#history .mypage-points-number {
	    top: -10%;/*20250329変更*/
        transform: scale(0.75);
        left: 0%;
}	

	
}

#history .mypage-points-number img {
    width: 20px;
    height: 20px;
    margin: 0 3px; /* 画像の左右にスペースを確保 */
    display: inline-block; /* 必要な場合に追加 */
	position: static;
}


#history .history-pt {
    color: #000000;
    font-size: 1.2rem;
    margin: 0;
    line-height: 5rem;
	letter-spacing: 0.05em
}


#history .mypage-points-number .possession {
    font-size: 19px;
    white-space: nowrap; /* 改行を防ぐ */
    text-align: center;
	padding: 0 0 1px 0;
}

#history .fixed-box-body {
    background: transparent;
}

#history .fixed-box {
    position: fixed;
    right: 10px;
    bottom: 20px;
    width: 300px;
    background: #FFFFFF;
    z-index: 500;
    height: 95px;
	border-radius: 5px 5px 0 0;
}

#history .fixed-box-title {
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
    background: #000;
    text-align: center;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0px;
    height: 20px;
    z-index: 10000000;
}

#history .gacha-button,
#history_wait .gacha-button,
#history_sent .gacha-button {
    top: 27%;
    height: 50px;
}


@media screen and (max-width: 1024px) {
    #history .fixed-box{
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 54px;
			height: 25px;
		z-index: 111111111;
		}
	
	#history .fixed-box-title{
		padding:5px 0;
		z-index: 10000000;
        top: 0;
		
	}

	#history .gacha-button{
		top: 30px;
		height: 50px;
		padding: 0;
	}
	
	#history .fixed-box-body{
		width:100%;
		margin:0 auto;
	}
	
}

@media screen and (min-width:768px) and (max-width:1024px){
		#history .mypage-points-number{
		transform: scale(0.55);
        left: -23%;
		top:-13%;
	}
		
    #history .fixed-box{
        width: 250px;
        position: fixed;
        left: auto;
	    height: 85px;
	}
	
	
	    #history .pointview {
        top: 0;
        left: 3%;
		width: 72%;
		
    }
	
    #history .his-button {
        top: 9%;
    }


	
	#history .fixed-box-title {
		color: #fff;
		font-size: 1.2rem;
		padding: 10px 0;
		background: #000;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0px;
		height: 20px;
	}

	#history .gacha-button{
		top:35%;
		height: 40px;
		padding-bottom:12px;
	}
	
	.fixedbox-txt {
		bottom:5%;
	}
	
	}

@media screen and (min-width: 768px) {
	#history .fixed-box {
		border-radius: 0;
	}
}
	
@media screen and (min-width:280px) and (max-width:429px){
 #history .fixed-box{
	    height: 110px;/*20250329変更*/
	 bottom:-5px;
	}
	#history .gacha-button{
		top:34%;
		height:42px;
	}
	
	#history .pointview {
	top: 0;/*20250329変更*/
	left:35%;
	}
	
	.his-button1, .his-button2 {
		/*font-size:12px;20250329変更*/
	font-size:12.5px;}

}

@media screen and (min-width:430px) and (max-width:767px){
	 #history .fixed-box{
	    height: 115px;/*20250329変更*/
	 bottom:-5px;
	}
	#history .gacha-button{
		top:33%;/*20250329変更*/
	}

		#history .pointview {
	/*bottom: 36%;20250329変更*/top:0;
	}

}


#history .button a{
    display: block;
		color:#000000;
}

#history .button a:visited {
    color: #000000;
}



/*固定フッター*/
/*result.html用*/
#resultpage .pointview {
border: none;
    margin: 0;
    display: block;
    position: absolute;
    text-align: center;
    z-index: 10;
	width: 75%;
}

#resultpage .mypage-points-number {
	display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding-left: 5px;
	transform: scale(0.7);
    position: absolute;
    left: -20px;
    top: -10%;
}


#resultpage .mypage-points-number img {
    width: 20px;
    height: 20px;
    margin: 0 3px; /* 画像の左右にスペースを確保 */
	display: inline-block;
    position: static;
}

#resultpage .history-pt {
	color: #000000;
    font-size: 1.2rem;
    margin: 0;
    line-height: 5rem;
    letter-spacing: 0.05em;
}

#resultpage .mypage-points-number .possession {
	font-size: 19px;
    white-space: nowrap;
    text-align: center;
    padding: 0 0 1px 0;}

#resultpage .fixed-box {
    position: fixed;
    right: 10px;
    bottom: 20px;
    width: 300px;
    background: #FFFFFF;
    z-index: 500;
    height: 95px;
	border-radius: 5px 5px 0 0;
 }


@media screen and (min-width: 768px) {
    #resultpage .fixed-box {
        border-radius: 0;
    }
}

#resultpage .fixed-box-title {
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
    background: #000;
    text-align: center;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 1000;
}



#resultpage .card-body {
    position: absolute;
    bottom: 25px;
    right: -10px;
}



@media screen and (max-width: 430px) {
    #resultpage .card-body {
        position: absolute;
        bottom: 30px;
        right: 0;
    }
}

@media screen and (min-width:280px) and (max-width:429px){
	#resultpage .card-body {
        position: absolute;
        bottom: 30px;
        right: 0;
}

}

#resultpage .button{
	padding:0;
}

#resultpage .gacha-button{
    top: 27%;
    height: 50px;
}

#resultpage .button a:visited {
    color: #000000;
}

#resultpage .button a{
	display:block;
	color:#000000;
	
}




/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
    #resultpage .fixed-box {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 54px;
        height: 25px;
        z-index: 111111111;
    }

    #resultpage .fixed-box-title {
        padding: 5px 0;
		z-index: 10000000;
        top: 0;
    }

	
	#resultpage .gacha-button{
		top: 38px;/*20250329変更*/
		height: 50px;
		padding: 0;
	}
	
	#resultpage .fixed-box-body{
		width:100%;
		margin:0 auto;
	}

}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	#resultpage .mypage-points-number{
		transform: scale(0.55);
        left: -23%;
		top:-13%;
	}
	
    #resultpage .fixed-box {
		width: 250px;
        position: fixed;
        left: auto;
        height: 130px;
	}

    #resultpage .pointview {
        top: 0;
        left: 3%;
		width: 72%;
		
    }

	
	#resultpage .fixed-box-title {
        color: #fff;
        font-size: 1.2rem;
        padding: 10px 0;
        background: #000;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0px;
        height: 20px;
    }
	
	    #resultpage .fixed-box {
        width: 250px;
        position: fixed;
        left: auto;
        height: 85px;
    }
	
	    #resultpage .gacha-button {
        top: 35%;
        height: 40px;
        padding-bottom: 12px;
    }
	
	#resultpage .his-button{
		top:9%;
	}
}

@media screen and (min-width: 280px) and (max-width: 429px) {
    #resultpage .fixed-box {
        height: 110px;/*20250329変更*/
        bottom: -5px;
    }


    #resultpage .pointview {
       top: 0;/*20250329変更*/
        left: 35%;
        transform: translateX(-50%);
    }
	
	#resultpage .gacha-button {
        top: 34%;
        height: 42px;
	}
	#resultpage .mypage-points-number {
        top: -10%;/*20250329変更*/
        transform: scale(0.75);
        left: 0%;
    }    
}

@media screen and (min-width: 430px) and (max-width: 767px) {
    #resultpage .fixed-box {
        height: 115px;/*20250329変更*/
        bottom: -5px;
    }


    #resultpage .pointview {
        /*bottom: 18px;20250329変更*/top:0;
    }
	
	#resultpage .mypage-points-number{
		left: -10px;
        top: -5%;/*20250329変更*/
	}
	
}

@media screen and (min-width: 430px) and (max-width: 767px) /*20250329追加*/{
    #resultpage .gacha-button {
        top: 33%;
    }
}




/*
#################################
個ページ
#################################
*/

/*///共通見出し///*/


.head-ttl {
    font-family: "Noto Sans JP";
    padding: 0 10px 5px 10px;
}


.ttl-ja .en{
	font-family: "Noto Sans JP";
	font-size: 30px;
	color: #000000;
	font-weight:bold;

}

.ttl-ja{
	font-size:/*20241201変更　20px*/15px;
	font-family: "Noto Sans JP";
	font-weight: 100;
	color: #000000;
	
	padding:0;
}

    .ttl-en {
	font-family: "Noto Sans JP";
	font-size: /*20241201変更 30px*/25px;
	font-weight:bold;
		    line-height: 1.1em;
    }

.ttl-ja-long{
	font-size:18px;
}


/*///個別-共通///*/

.oripatop .genre-all a,
.genre--pokemon .poke a,
.genre--onepiece .one a,
.genre--dragonball .db a,
.genre--yugioh .yugi a,
.genre--koukan .koukan a{
	border-bottom:#000000 4px solid;
	border-radius: 0;
	padding: 0 0 30px 0;
}
/*///個別-ポケモン///*/
/*///個別-ワンピース///*/
/*///個別-ドラゴンボール///*/
/*///個別-遊戯王///*/
/*///個別-交換所///*/


/*
#################################
スライダー
#################################
*/
.main{

	border-bottom:none;

}

.slick-dots li{
	width:8px;
	height:8px;
	border-radius:20px;
}

.slick-dots li button:before{
	width:8px;
	height:8px;
	border-radius:20px;
	background-color:transparent;
}

.slick-dots li button{
	background-color:transparent;
	border-radius:50px;
	width:8px;
	height:8px;
	border:1px solid #000000;
	padding:0;

}

.slick-dots li.slick-active button:before{
	background-color: #000000;
	width:8px;
	height:8px;
	border-radius:20px;
}

.slick-dots{
	bottom:-20px;
}





/*スライダー　終*/


/*///本文///*/
.cont-body{
	padding:0 10px;
}
.cont-txt{
	font-family: "Noto Sans JP";
	font-size: 12px;
    font-weight: 100;
	line-height: 1.7em;
}

.redtxt{
		color:#ff3300;
		font-size: 0.7em;
}

.red-text{
		color:#ff3300;
}

 #register .redtxt p:last-child{
	text-indent: 0; /* 最初の行は字下げなし */
    padding-left: 1em; /* 全体をインデント */
    text-indent: -1em; /* 最初の行を引き戻す */
    margin: 0;
		font-size: 0.8em;
}

/*///入力フォーム///*/

.data-list dt{
    color: #000000;
}/*見出し(dt)*/
.form-input{
	color:#555;
}


/*///ボタン///*/
.linkbtn-red{
	max-width:40%;
	width:30%;
	margin:0 auto;
	color:#FFFFFF;
	background-color: #000000;
	border:none;
	border-radius: 30px;
	padding: 7px 0;
	text-align: center;
	cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.linkbtn-red:hover{
	cursor: pointer;
}

.linkbtn-sending{
	max-width:40%;
	width:25%;
	height:22px;
	margin:0 auto;
	color:#FFFFFF;
	background-color: #000000;
	border:#000000 1px solid;
	border-radius: 30px;
	padding: 7px 0;
	text-align: center;
	cursor: pointer; 
	line-height: 1.8;
}

.linkbtn-sending:hover{
	cursor: pointer;
}

.linkbtn-account{
	max-width:40%;
	width:25%;
	height:22px;
	margin:0 auto 10px auto;
	color:#000000;
	background-color: #FFFFFF;
	border:#000000 1px solid;
	border-radius: 30px;
	padding: 7px 0;
	text-align: center;
	cursor: pointer; 
	line-height: 1.8;
}

.linkbtn-account:hover{
	cursor: pointer;
}



@media screen and (min-width: 280px) and (max-width: 435px)/*スマホ対応(iP14込み)*/ {
	
	.linkbtn-red{
	max-width:75%;
	width:100%;
	margin:0 auto 15px auto;
	 padding: 7px 0;
}
	
	.linkbtn-sending{
	max-width:65%;
	width:100%;
	margin:0 auto;
	 padding: 4px 0;
}

	.linkbtn-account{
	max-width:65%;
	width:100%;
	margin:0 auto 6px auto;
	 padding: 4px 0;
}
	




	
}

@media screen and (min-width:436px) and (max-width: 768px) /*iPadmini対応*/{
	.linkbtn-red{
	max-width:50%;
	width:100%;
}
	
	.linkbtn-sending{
	max-width:50%;
	width:100%;
}

	.linkbtn-account{
	max-width:50%;
	width:100%;
}



}

@media screen and (min-width: 770px) and (max-width: 1024px) /*タブレット対応*/{
	.linkbtn-red{
	max-width:35%;
	width:100%;

}
	
	.linkbtn-sending{
	max-width:35%;
	width:100%;
	}
	
	.linkbtn-account{
	max-width:35%;
	width:100%;
	}

	
	
}

.button-r{
	color:#FFFFFF;
	font-size: 15px;
	display:block;
}

.button-r:visited{
	color:#FFFFFF;
}
	
.button-sending{
	color:#FFFFFF;
	font-size: 12px;
	display:block;
}

.button-sending:visited{
	color:#FFFFFF;
}

.button-account{
	color:#000000;
	font-size: 12px;
	display:block;
}

.button-account:visited{
	color:#000000;
}


.linkbtn-red02{
    max-width: 40%;
    width: 30%;
    margin: 0 auto;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 50px;
    padding: 15px 0;
	text-align: center;
}

.linkbtn-red02:hover{
	  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

@media screen and (min-width: 280px) and (max-width: 435px)/*スマホ対応(iP14込み)*/ {
	
	.linkbtn-red02{
	max-width:75%;
	width:100%;
	margin:0 auto;
	padding: 10px 0;

}
}

@media screen and (min-width:436px) and (max-width: 768px) /*iPadmini対応*/{
	.linkbtn-red02{
	max-width:50%;
	width:100%;
		        padding: 15px 0;
}

}

@media screen and (min-width: 770px) and (max-width: 1024px) /*タブレット対応*/{
	.linkbtn-red02{
	max-width:35%;
	width:100%;
		padding: 15px 0;

}
}

.button-r02{
	color:#000000;
	font-size: 15px;
	display:block;
	margin: 0 auto;
}

.button-r02:visited{
	color:#000000;
}


.link-center{
	color:#000000;
	font-weight: 100;
}


/*
#################################
お知らせ
#################################
*/

.news-ul {
    padding: 0;
    margin: 0;
}
.news-link{
	border-bottom: 1px #BEBEBE dashed;
}

.date{
	font-size:18px;
}

@media screen and (max-width: 480px) {
    .news-link time {
        display: block;
        font-size: 18px;
    }
}

.topics{
	font-weight: 100;
	font-size: 16px;
}

/*記事ページ*/
.news-h2{
	font-size:25px;
}
.news-date{
	text-align: end;
	font-size:14px;
	margin:5px 0;
	padding: 0 7px 0 0;
}


/*
#################################
ポイント購入
#################################
*/

.link,
.link:visited{
	color:#000000;
	text-decoration: none;
	border-bottom:1px dashed #000000;
}


.mypage-menu li{
		border: 2px #000000 solid;
		border-radius:10px ;
		width:100%;
		margin: 0 auto 10px auto;
		display: flex;
		height:120px;
		position: relative;
}

@media screen and (max-width: 768px) {
	ul.mypage-menu li{
		margin: 0 auto 10px auto;
	
	}
}

ul.mypage-menu a{
	background: transparent;
	text-align: start;
	padding: 45px 10px;
	display: block;
	width:100%;
	height:auto;
	position: relative;
}

ul.mypage-menu a svg {
	right: 40px;
}
@media screen and (max-width: 768px) {
		ul.mypage-menu a svg{
			 right: 20px;
	}
}

	.charge-card,
	.charge-bank,
	.charge-paypay{
	position: absolute;
    top: 50%;
    right: 70px;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
	.charge-card,
	.charge-bank,
	.charge-paypay{
		        right: 45px;
	}
}

.arrow_r_b {
  position: relative;
  display: inline-block;
	
}
.arrow_r_b:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #333;
  border-radius: 50%;
 position: absolute;
    top: 1px;
    right: 10px;
    bottom: 0;
    margin: auto;

}
.arrow_r_b:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
 position: absolute;
  top: 1px;
    right: 16px;
  bottom: 0;
  margin: auto;

}



@media screen and (max-width: 768px) {
	.arrow_r_b:before {
	  content: '';
	  width: 18px;
	  height: 18px;
	  background: #333;
	  border-radius: 50%;
	  position: absolute;
	  top: 1px;
	  right: 10px;
	  bottom: 0;
	  margin: auto;
	}
	.arrow_r_b:after {
	  content: '';
	  width: 6px;
	  height: 6px;
	  border: 0;
	  border-top: solid 2px #fff;
	  border-right: solid 2px #fff;
	  transform: rotate(45deg);
	  position: absolute;
	  top: 1px;
	  right: 16px;
	  bottom: 0;
	  margin: auto;
	}
}




.point-btn{
	display:flex;
	justify-content: space-between;
}


.en{
	
	font-family: "Noto Sans JP", sans-serif;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	/*font-family: 'Zen Old Mincho', serif;*/
}
.btn-txt{
	color:#000000;
	padding: 0 15px 0 0;
	position: absolute;
	top: 50%; 
	transform: translateY(-50%);
	right: 2%;
	margin: 0;

}

#point-lim .btn-txt{
	    margin-top: 15px;

}


@media screen and (max-width: 768px) {
	.btn-txt{
		padding: 0 25px 0 0;
	}
}

.point-btn{
	background-color: transparent;
	border:1px solid #000000;
	border-radius: 10px;
	position: relative;
}



.credit-select{
display: flex;
    width: 80%;
    position: absolute;
    top: 6rem;
    left: 1.0rem;
	height: 4.5rem;
}

.credit-select2{
	height: 3.5rem;
}



.cs-title{
font-size: 10px;
    line-height: 1.5rem;
    background-color: #f2f2f2;
    color: #666666;
    padding: 15px 18px;
    text-align: center;
    height: auto;
}

.cs-title2{
    line-height: 0.6rem;
}


.cs-txt{
	font-size: 10px;
    border: 1px solid #f2f2f2;
    padding: 4px 5px;
    height: auto;}

.cs-txt2{
    padding: 7px 5px;
}

.cs-txt3{
	font-size: 6px;
    height: auto;
	padding:0;
	width:59%;
	text-indent: -1em; 
    padding-left: 1em; 
    line-height: 1.5; 
	letter-spacing: 0.1em;
}


/*.mypage-menu li:first-child a {
        padding: 33px 10px 0 10px;
    }*/

.mypage-menu li:first-child a,
.mypage-menu li:nth-child(2) a,
.mypage-menu li:nth-child(3) a,
.mypage-menu li:nth-child(4) a{
    padding: 33px 10px 0 10px;
}


@media screen and (min-width: 280px) and (max-width: 767px)/*スマホ対応(iP14込み)*/ {
	.credit-select{
		display:block;
		width: 50%;
		        top: 45px;
		
		
	}
	.cs-title{
		font-size: 8px;
		line-height: 1.5rem;
		padding: 0;
		width:100%;
	}
	.cs-txt{
		font-size: 6px;
	}
	
	.mypage-menu li:first-child a {
		padding: 20px 10px 0 10px;
	}
	
	.mypage-menu li:nth-child(2) a,
.mypage-menu li:nth-child(3) a {
		padding: 20px 10px 0 10px;
}

}


.with-bonus p{
	font-size: 0.9rem;
    text-align: center;
	padding-top:3px;
}


/*////ランク限定-ポイント購入ページ表示////*/

#point-lim button{
	position: relative;
}


.bonus-buy{    
    width: 60%;
    font-size: 0.55em;
    text-align: center;

}

.bonus-buy p{
	background-color:#000000;
    width: fit-content;
	margin: 2px auto 0 auto;
	border-radius: 30px;
	padding: 0 5px 2px 5px;
	color:#FFFFFF;
	font-size:0.9em;
}

#point-lim .btn-point .bonus-buy {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    height: 100%;
	width:100%;
}

#point-lim .point-btn img {
    margin: 4px 1px 0 0;
}



#point-lim .btn-point{
	display: flex;
    align-items: center;
   justify-content: center; 
    text-align: left; 
	position: relative;
	top:-3px;
}

#point-lim .bonus-wrapper{
	display: flex; 
    align-items: center; 
    justify-content: center;
}

#point-lim .btn-txt{
	margin: 0;
}



#point-lim .arrow_r_b:after{
	top:1px;
}


#point-lim .arrow_r_b:before{
	top:1px;
}




/*
#################################
お問い合わせ
#################################
*/

.form-input{
	background: #FFFFFF;
	border:#000000 0.8px solid;
}

.form-submit{
	color: #FFFFFF;
    border: #000000 1px solid;
	border-radius:50px;
	background-color: #000000;
}

.req {
    color: #ff3300; /* デフォルトの色 */
    transition: color 0.3s ease; /* アニメーションを追加しても良い */
}

.req.transparent {
    color: transparent; /* 透明色 */
}


.confirm-txt{
	background-color: transparent;
	color:#000000;
    font-weight: 100
}
.cont-txt2 {
	text-align: center;
}

input:placeholder-shown + span.req { 
  color: transparent;
}


/*
#################################
アカウント情報
#################################
*/

input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: '';
}

.select-input label {
    top: 0;
    left: -30px;
    text-align: end;
}
.form-radio_label{
	border:none;
	padding: 5px 5px 5px 0;
}

.form-radio:checked + .form-radio_label {
    border: none;
    background: transparent;
    color: #000000;
}

#dl-mf{
	display:flex;
}

#dl-mf dd {
    margin: 6px 0 0 30px;
}

.data-list dt,
.data-list dd{
    font-weight: 100;
}

.form-input{
    font-weight: 100;
}

.form-input:read-only{
	background-color:#FFFFFF;
}

.select-input{
	background-color: #FFFFFF;
	border:solid 1px #000000;
}

.select-input.select-date_year {
    width: 40%;
	height:46px;
}
.select-input.select-date_month {
	width: 25%;
	height:46px;
}
.select-input.select-date_day {
    width: 25%;
	height:46px;
}



#userYear,
#userMonth,
#userDay{
	position: absolute;
	top:0;
	left:0;
}

.select-input select{
	padding:15px;
}

.arrow_u {
  position: relative;
  display: inline-block;
  padding-left: 20px;
	height: 46px;
}
.arrow_u:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 60px;
  bottom: 0;
  margin: auto;
}


/*
#################################
ログイン
#################################
*/


#loginpage .cont-txt a{
	color:red;
	text-decoration-line:none;
}

#loginpage .cont-txt a:visited{
	color:red;
}

#loginpage .cont-txt a:hover{
	border-bottom:dashed red 1px;
}




/*
#################################
プライバシーポリシー、利用規約
#################################
*/
.gray{
	background-color: #d3d3d3;
	padding:25px 10px;
	line-height: 1.8em;
	margin:20px 0 20px 0;
}

.pp-body p,
.pp-body li{
	font-family: "Noto Sans JP";
    font-weight: 100;
}

.pp-body h3{
	margin-top:20px;
}


.pp-list{
	list-style-type: decimal;
    padding-left: 25px;
}

.contactlink::before{
  content: ">"; /* 区切り文字 */
  margin: 0 2px 0 2px; /* 区切り文字の左右の余白 */
}

.contactlink a:visited{
	color:#000000;
}

.address{
	border-top: 0.8px #d3d3d3 solid;
	border-bottom: 0.8px #d3d3d3 solid;
    margin: 20px 0 0 0;
    padding: 20px 10px;
    font-size: 90%;
}

.day{
	text-align: right;
	margin:20px 0 0 0;
}

.kana{
	list-style-type: katakana;
	padding-left: 30px;
}

.none{
	list-style-type:none;
}


/*
#################################
特定商取引法に基づく表記、会社概要
#################################
*/

.cont-table{
	margin-top:20px;
}
.cont-table th{
	font-family: "Noto Sans JP";
}

.cont-table td{
	font-family: "Noto Sans JP";
    font-weight: 100;
}

/*
#################################
Q&A
#################################
*/
.qa{
	max-width:1024px;
	width:100%;
}
.qa .answer{
	overflow-wrap: anywhere;
}

.blank{
	padding:35px 0 0 0;
}/*	Q&A以外のページに適用あり*/

/*20250114追加ここから*/
.qa{
	font-family: 'Noto Sans JP', sans-serif;
	background-color:#F5F5F5; 
	padding:20px 10px;
	margin: 20px auto;
    width: 94%;
}

@media screen and (min-width: 767px)/*グレー部分の横幅調整用*/ {
	.qa{
    width: 97%;
	}
}

.qa .question{
	width: 95%;
}

.qa .answer {
	width: 95%;
}
.question,.answer{
	font-size:15px;
}

.question span{
	font-size:1em;
	
}
.answer span{
	font-weight: 100;
	font-size:0.8em;
}

.question strong,
.answer strong{
	font-size:1em;
}

.question,
.answer{
	display: block;
    text-indent: -1em;
    padding-left: 15px;
}

.question strong,
.answer strong {
	display: inline; /* Q. や A. はインラインのまま維持 */
	text-indent: 0; /* 字下げを無効化 */
}
@media screen and (min-width: 440px) {
/*ip16promax以上の画面サイズでフォントを少し拡大*/
.question span{
	font-size:1.2em;
}
.answer span{
	font-weight: 100;
	font-size:1em;
}

.question strong,
.answer strong{
	font-size:1.2em;
}

	
}
/*20250114追加ここまで*/

/*
#################################
パンくずリスト
#################################
*/

nav{
	width:100%;
	margin:0 auto;
}
.breadcrumb {
  width: 100%; 
  display: flex; /* リストを横並びに */
  flex-wrap: wrap; /* リストが折り返すように */
  list-style: none; /* リストスタイルを無しに */
	padding:10px 0 10px 10px;
	font-size: 13px;
    font-weight: 100;
	
}


.breadcrumb li::after  {
  content: ">"; /* 区切り文字 */
  margin: 0 2px 0 2px; /* 区切り文字の左右の余白 */
}

.breadcrumb li:last-child::after  {
  content: " "; /* 区切り文字 */
}

.breadcrumb a {
		color:#000000;
}
.breadcrumb a:visited {
		color:#000000;
}

.bread{
	margin:0;
}

/*長体（文字数が長くなる場合の改行防止）*/
@media screen and (max-width:400px){
	.small{
		font-size: 10px;
		}
}


/*
#################################
戻るボタン
#################################
*/

.page-back {
	display: block;
	color: #000000;
	margin: 0 auto 30px auto;
	border-bottom: none;
    font-weight: 100;
	padding: 10px 15px;
	width:100%;


}
.page-back  a :visited{
	color:#000000;
}
@media screen and (max-width:768px){
.page-back {
	margin: 0;
}
}

.page-back::before{
	content: "<";
    /*margin: 0 .6em;*/
}


/*
#################################
フッター
#################################
*/
#footer{
    border-top:none;
	background-color:#333333;
	height:30rem;
	position: static;
}

.footer-menu-link{
	color:#FFFFFF;
}

.footer-nav {
    display: flex;
    max-width: 1024px;
    width: 100%;
}

.footer-menu {
    width: 200px;
    padding: 0;
    height: 25rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    line-height: 2.9rem;
}

.footer-heading{
	color:#FFFFFF;
}

.footer-menu-link {
font-family: 'Noto Sans JP', sans-serif;
    font-weight: 100;
}
.footer-menu-list{
	padding:0 5px 0 5px;
	width:18rem;
	font-family: 'Noto Sans JP', sans-serif;
}

.footer-menu-list:nth-child(9){
	padding-top:2.4rem;
}

.footer-h-mypage a{
	color:#FFFFFF;
}
.footer-h-mypage a:visited{
	color:#FFFFFF;
}


.linkmark-white img{
	width: auto;
    height: 40%;
    inline-size: 7%;}

.pbuy{
	height:1.5rem;
}

.pbuyli{
	line-height: 1.8rem;
	padding: 5px 5px 5px 5px;
}

.pbuy a{
	color: #FFFFFF;
	font-size: 0.8rem;
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 100;
}
.pbuy a:visited{
	color: #FFFFFF;
}

.fm2 li:nth-child(5){
transform: scaleX(0.9);
transform-origin: top left;
}

.fm2 li:nth-child(6){
transform: scaleX(0.75);
transform-origin: top left;
}



@media screen and (max-width:768px){

#footer{
	height:35rem;
	position: relative;
}

.footer-menu {
	color:#FFFFFF;
	width:100%;
	overflow: hidden;
}
	
.footer-menu:nth-child(1){
	height:18rem;
	}
.footer-menu:nth-child(2) {
        height: 30rem;
    }
	
#loginfooter .footer-menu{
		width:100%;
	}	
#loginfooter .footer-menu:nth-child(1),
#loginfooter .footer-menu:nth-child(3){
	width:30%;
	}
#loginfooter .footer-menu:nth-child(2){
	width:35%;
	}
	
#loginfooter {
        justify-content: space-between;
        width: 95%;
        margin: 0 auto;
	        padding-top: 15px;
    }


.footer-nav{
padding: 5px 0 0 0;
	width:92%;
	display: flex;
}

.footer-menu-list{
	padding:0 5px 0 5px;	
}

.pbuyli{
	padding: 5px 5px 6px 5px;
	}
	
.copyright {
        position: absolute;
        bottom: -2.1rem;
        right: 0;
        width: 100vw;
    }
	
.footer-menu-list:nth-child(8) {
    /*padding-top: 0;*/
}
	.footer-menu {
		flex-wrap: nowrap;
	}
	
	
	#loginfooter .footer-menu{
		height:25rem;
	}
	
	#loginfooter .footer-menu-link{
		font-size:1.1rem;
	}
	
	.linkmark-white img {
    width: auto;
    height: 40%;
    inline-size: 17%;
}
	
	.footer-heading{
font-size: 1.3rem;	}
	
	
	
.footer-menu-list:nth-child(9){
	padding-top:0;
}
	
	
}


#footer .en{
	font-family: "Noto Sans JP";
}

.copyright {
    background-color:#000000;
	color: #FFFFFF;
	border-top:none;
	}



/*固定フッター（ログイン/新規登録）*/
.fixed-box{
	transition:unset;
}

@media screen and (min-width:768px) and (max-width:1024px){
	#under_fixed{
		width:250px;
		position: fixed;
		top:auto;
		left:auto;
		bottom:0;
		right:0;
	}
	

.fixed-box-title {
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
    background: #000;
    text-align: center;
	}
.fixed-box-body {
    padding: 5px 15px;
    box-sizing: border-box;
	}
.fixed-box-body .button {
		margin: 10px 0;
        height: 90%;
		width:100%;
	}
	}